Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Javascript

จัด HTML5 SVG ให้อยู่ตรงกลางหน้าจอ


SVG ย่อมาจาก Scalable Vector Graphics และเป็นภาษาสำหรับการอธิบายกราฟิก 2 มิติและแอปพลิเคชันกราฟิกใน XML จากนั้น XML จะแสดงโดยโปรแกรมดู SVG

ตัวอย่าง

ให้เราดูตัวอย่างของ SVG -

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>SVG</title>
      <meta charset="utf-8" />
   </head>
   <body>
      <h2>HTML5 SVG Circle</h2>
      <svg id = "svgelem" height = "200" xmlns = "https://www.w3.org/2000/svg">
         <circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
      </svg>
   </body>
</html>

หากต้องการให้อยู่ตรงกลาง ให้เพิ่ม CSS ดังนี้ −

# svgelem {
   margin-left:auto;
   margin-right:auto;
   display:block;
}