Question

0

28

Vistas

How can I centre this svg sitemap?

How can I centre the sitemap SVG I made with html? I want to get it in in the middle of the page

<svg id="svgJS" height="500" width="180">
  <g id="groupId1">
    <rect x="15" y="130" height="50" width="150" 
          stroke="purple" fill="none" stroke-width="2" />
    <text fill="#000" font-size="14" x="90" y="160"
          font-family="Arial" text-anchor="middle">
          Home Page</text>
  </g>
  <g id="groupId2" >
    <line id="shapeId2" stroke="purple" stroke-width="2" 
          x1="90" y1="180" x2="90" y2="230"></line>
    <polyline points="95, 220 90, 230 85, 220" 
          stroke="purple" stroke-width="2" fill="none" />
  </g>

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-03T12:20:54.653Z

Use flexbox, and then justify, and align the content.

body { display: flex; justify-content: center; align-items: center; }

<svg id="svgJS" height="500" width="180">
  <g id="groupId1">
    <rect x="15" y="130" height="50" width="150" 
          stroke="purple" fill="none" stroke-width="2" />
    <text fill="#000" font-size="14" x="90" y="160"
          font-family="Arial" text-anchor="middle">
          Home Page</text>
  </g>
  <g id="groupId2" >
    <line id="shapeId2" stroke="purple" stroke-width="2" 
          x1="90" y1="180" x2="90" y2="230"></line>
    <polyline points="95, 220 90, 230 85, 220" 
          stroke="purple" stroke-width="2" fill="none" />
  </g>
</svg>