1. ホーム
  2. css

[解決済み] svgの円のダブルストロークの色

2022-02-16 02:36:34

質問

ストロークのみ、フィルなしで円を作るには、このようにします。

fill: none !important;
stroke-width: 1px;

  • ダブルストロークが欲しい。

どのように解決するのですか?

悲しいかな、SVGにダブルストロークを設定することはできず、破線か実線のストロークしか設定できません。

その代わりに、まったく同じ要素を作成し、必要な分だけサイズや半径を小さくしてください。

.circle {
  fill: none;
  stroke: black;
}
<svg height="100" width="100">
  <circle class="circle" cx="50" cy="50" r="40" stroke-width="1" />
  <circle class="circle" cx="50" cy="50" r="38" stroke-width="1" />
</svg>