html - 如何在 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/