如何在svg中居中

Question

我迷失了如何在我调整页面大小的同时将圆形元素放在svg的中心而不会移动或变得越来越小.

我已经尝试过viewBox,但它并没有达到我的预期.

Answer 1

viewBox变体的替代方案:

<svg width="100" height="100">
  <circle cx="50%" cy="50%" r="10"/>
</svg>

但是,如果缩放整个页面,圆圈会变大.

另一种方法是使用带有圆形线框的零长度路径,如下所示:

<svg viewBox="0 0 100 100">
  <path d="M50 50" stroke-linecap="round" stroke="black" 
        fill="none" vector-effects="non-scaling-stroke"
        stroke-width="20"/>
</svg>

http://jsfiddle.net/dAEB9/

Answer 2

<svg viewBox="-1 -1 2 2"> <!-- viewBox defines the coordinate system.-->
    <circle cx="0" cy="0" r="1" />
</svg>

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

http://jsfiddle.net/QrNnN/