How does one center this SVG horizontally within .svg_wrapper?

.svg_wrapper { border: 1px solid grey; width: 200px;
}

<div> <svg viewBox="0 0 600 425"> <path d="M 175, 175 m 0, -75 a 75,75 0 1,0 0,150 a 75,75 0 1,0 0,-150" fill="none" stroke="black" stroke-width="150" stroke-dasharray="0 600 600 0" stroke-dashoffset="1000"> <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="2s" repeatCount="1" fill="freeze" /> </path> </svg>
</div>

Tried stuff like margin: 0 auto, text-align: center as well as flexbox but to no avail.

0

1 Answer

The SVG is centered in the wrapper...the path, however, is not centered in the SVG

You would have to adjust the viewbox accordingly

<svg viewBox="0 0 350 350">

JSfiddle Demo

1

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy