TOP

SVG circle要素

中心座標と半径を指定して、円を描きます。

円を描いたサンプルプログラム

<circle cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10" />


circle要素の主な属性

属性名
cx円の中心の X 座標
cy円の中心の Y 座標
円の半径
stroke 線の色を指定します。
例:stroke="red" stroke="#FF11BB"  stroke="none"
fill 塗りつぶし色を指定します。
例:fill="red"  fill="#FF11BB"  fill="none"
fill-opacity 塗りつぶしの透明度を指定します。
0(透明)~1(不透明) 例:fill-opacity="0.5"
stroke-opacity 線の透明度を指定します。
0(透明)~1(不透明) 例:stroke-opacity="0.5"
opacity 全体の透明度を指定します。
0(透明)~1(不透明) 例:opacity="0.5"
stroke-dasharray 線を点線にします。数値をカンマまたは空白で区切る。
例:stroke-dasharray="10,20"