BinaryDevelop
  1. ホーム
  2. svg

[解決済み] SVGで中空円を描画する

2022-02-01 08:30:45

質問

SVGで中空円を描画する方法がよくわからないのですが。

色で塗りつぶした後、黒い輪郭を持つリング状のものが欲しいのですが。

私が考えた方法は、2つの円があって、1つはもう1つよりも半径が小さいものでした。問題は、2つの円を塗りつぶすときに、小さい方の円がその上に乗っているのと同じ塗りつぶし色になるようにするにはどうしたらいいかということです。

解決方法は？

ただ fill="none" とし、その上で stroke (アウトライン)が描画されます。 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="none" />
</svg>

また、2色にしたい場合はこのようになります。 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
   <circle cx="100" cy="50" r="39" stroke="red" stroke-width="2" fill="none" />
</svg>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します