Computer >> Máy Tính >  >> Lập trình >> Javascript

Căn chỉnh HTML5 SVG vào giữa màn hình


SVG là viết tắt của Scalable Vector Graphics và nó là ngôn ngữ để mô tả các ứng dụng đồ họa và đồ họa 2D trong XML và XML sau đó được hiển thị bởi một trình xem SVG.

Ví dụ

Hãy để chúng tôi xem ví dụ về 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>

Để căn giữa, hãy thêm CSS như sau -

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