如何在SVG中居中一个圆形

Question

我不知道如何在svg的中心放置一个圆形元素，而不会随着页面大小的调整而移动或变大变小。

我尝试使用viewBox，但它并没有达到我的预期效果。

- zcaudate

---

如果正确使用viewBox，它将有效地使SVG居中。 - Josh Crozier

哦...我真傻 =) 要在(-1000 -1000)和(1000 1000)之间获得一个坐标系... viewBox需要是：viewBox="-1000 -1000 2000 2000"，最后两个值是长度，而不是坐标。 - zcaudate

Answer 1

< p >一种替代< code > 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/

- Erik Dahlström

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/

- bjb568

---

交替地，viewbox 需要将描边大小添加到宽度和高度中，然后圆形需要偏移半个描边大小。如果 stroke=6，则 viewbox= -3 -3 106 106。 - theman0123

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/

- Matěj Kříž

---

你能在翻译中使用百分比吗？ - nixkuroi