Question

如何将此SVG水平居中于.svg_wrapper？

HTML：

<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>

CSS：

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

尝试了margin: 0 auto，text-align: center以及flexbox之类的内容，但无济于事。

Answer 1

SVG以包装器为中心......但是，路径不在SVG中心

您必须相应地调整viewbox

<svg viewBox="0 0 350 350">

JSfiddle Demo

如何将SVG集中在其容器中？

1 个答案: