HTML5 SVG को स्क्रीन के केंद्र में अलाइन करें

SVG सेंटरिंग

SVG का मतलब स्केलेबल वेक्टर ग्राफिक्स है और यह XML में 2D-ग्राफिक्स और ग्राफिकल एप्लिकेशन का वर्णन करने के लिए एक भाषा है और XML को फिर 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;
}

margin: auto के साथ display: block ब्लॉक-लेवल SVG एलिमेंट्स को क्षैतिज रूप से केंद्रित करता है।