CODEWITHSUNDEEP
csssvg
Mark Boulder
Mark Boulder

Reputation: 14307

How to center SVG within its container?

How does one center this SVG horizontally within .svg_wrapper?

.svg_wrapper {
  border: 1px solid grey;
  width: 200px;
}
<div class="svg_wrapper">
  <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>

http://jsfiddle.net/frank_o/fj7Xc/

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

Upvotes: 6

Views: 36903

Answers (1)

Paulie_D
Paulie_D

Reputation: 115313

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

Upvotes: 5

Related Questions