Css

CSSのSVG要素にボーダー/アウトライン/ストロークを追加するにはどうすればよいですか?



How Add Border Outline Stroke Svg Elements Css



解決:

CSSで 、 何かのようなもの:

パス{塗りつぶし:なし;ストローク:#646464;ストローク幅:1px;ストローク-ダッシュアレイ:2,2;ストローク-linejoin:ラウンド; } 

ドロップシャドウを追加してみてください。



svg {フィルター:ドロップシャドウ(1px 1px 0pxパープル)ドロップシャドウ(-1px 1px 0pxパープル)ドロップシャドウ(1px -1px 0pxパープル)ドロップシャドウ(-1px -1px 0pxパープル); }
.st0 {fill:#ffffff;ストローク-miterlimit:10;} 

質問の場合:CSSを使用してWebページのSVG要素に境界線/アウトライン/ストロークを追加するにはどうすればよいですか?

あなたはCSSで行うことができます:



パス{アウトライン:3px緑色に点灯; }

2018年現在、ChromeとSafariでサポートされていますが、最新のすべてのブラウザで利用できるとは限らないことに注意してください。以下の例を参照してください。

CSSを介してアウトラインをに適用しました内部にパスがあるグループ。静的では見栄えがします。動的(ドラッグ)では、これらのアーティファクトを定期的に見ることができます(左側)

ここに画像の説明を入力してください



アップデート:

  • アウトラインが「ソリッド」の場合-アーティファクトはありません
  • Safariモバイルはのアウトラインをサポートしていません要素..。