如何将SVG居中在其容器内?

6
如何使SVG在.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/

尝试了margin: 0 autotext-align: center以及flexbox,但都没有成功。

1个回答

4
< p > SVG在包装器中居中显示...但路径不在SVG中心对齐

< p > 您需要相应地调整< code >视口框

<svg viewBox="0 0 350 350">

JSfiddle演示


30
请问您能否解释一下那是如何运作的? - verunar

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接