html - SVGで円を中心に置く方法

Question

ページのサイズを変更するときに円要素を動かしたり、大きくしたり小さくしたりせずに、svg の中心に円要素を配置する方法がわかりません。

viewBox を試しましたが、期待どおりの結果が得られません。

Answer 1

viewBoxバリアントの代替：

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

ただし、ページ全体をズームすると、円が大きくなります。

もう 1 つの方法は、次のように、ラインキャップが丸められた長さ 0 のパスを使用することです。

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