如何在svg中居中圆形

Question

我失去了如何将圆形元素放置在svg的中心位置，而无需移动它，或者在调整页面大小时变得越来越小。

我试过viewBox，但它没有做我所期望的。

Answer 1

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

Answer 2

到viewBox变种的选择：

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

如果缩小整个页面的圆圈但是会变得更大。

另一种方法是使用零长度路径与圆linecaps，像这样：

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

把你圈组<g>和使用transform="translate(x, y)"。

<svg viewBox="0 0 400 400"> 
    <g transform="translate(200, 200)"> 
    <circle cx="0" cy="0" r="200" style="" fill="darkOrange"></circle> 
    </g> 
</svg> 

结果：

上的jsfiddle简单的例子：
https://jsfiddle.net/mattez/0p2pstrf/