[解決済み] 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>
関連
-
[解決済み】SVGオブジェクトの拡大縮小とミラーリング
-
[解決済み] d3.jsでノードのダブルクリックイベントを作成するにはどうすればよいですか？
-
[解決済み] SafariでSvg画像要素が表示されない
-
[解決済み] svg要素の色を変更するには？
-
[解決済み] ImageMagickでSVGをPNGに変換する方法は？
-
[解決済み】PNG画像をSVGに変換する方法は？[クローズド］
-
[解決済み】円弧（のSVGパス）を計算する方法）
-
[解決済み] SVGの円弧パスによる円形描画
-
[解決済み] SVG における text 要素の垂直アライメント
-
[解決済み] svgのx属性とdx属性の違いは何ですか？
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン