web-dev-qa-db-ja.com

CSSのSVG要素にボーダー/アウトライン/ストロークを追加する方法は？

D3jsのおかげで、SVG要素をWebページに挿入しています。次のような構文のため、これらの要素のスタイルを設定することが困難です

path { border: 3px solid green; }

動作しません。

CSSを使用してWebページのSVG要素にボーダー/アウトライン/ストロークを追加するには？

csssvgd3.jsborder
17
Hugolpz

CSSの場合、次のようなもの：

path {
  fill: none;
  stroke: #646464;
  stroke-width: 1px;
  stroke-dasharray: 2,2;
  stroke-linejoin: round;
}

編集：タイプミス

25
Hugolpz

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

ここでは、私のコードペンほどきれいには見えませんが、それでもまだ役に立つかもしれません。

svg {
  filter: drop-shadow(1px 1px 0px #111) drop-shadow(-1px 1px 0px #111) drop-shadow(1px -1px 0px #111) drop-shadow(-1px -1px 0px #111);
}

.arr {
  fill: none;
  stroke: #5457ff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
<svg height="45" width="40">
  <g class="arr"><path d="m 5 20 l 15 -15 l 15 15 m -15 0 l 0 20"/></g>
</svg>
3
Souleste

質問：CSSでWebページのSVG要素にボーダー/アウトライン/ストロークを追加する方法は？

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

path { outline: 3px solid green; }

2018年現在、chromeおよびsafariでサポートされていますが、すべての最新のブラウザーで利用できるとは限りません。以下の例を参照してください。

CSSを介してアウトラインを<g>グループに適用し、内部にパスを設定しました。静的では見栄えがします。ダイナミック（ドラッグ）では、これらのアーティファクトを定期的に確認できます（左側）

enter image description here

更新：

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