CSSでSVGパスの塗りつぶしの色を変更できますか?

CSS 経由で SVG パスの塗りつぶしの色をカスタマイズできますか?

SVG (Scalable Vector Graphics) では、CSS を使用してパスなどの要素を変更できます。次のコードを考えてみましょう:

<svg>
  <path fill="#333333" d="M15.985,5.972C...Z" />
</svg>

パスのタグを変更せずに CSS を使用して塗りつぶしの色を変更することは可能ですか?

答え:

はい、CSS を使用して SVG パスの塗りつぶしの色をカスタマイズできます。これを行うには、他の HTML 要素と同様に、パス要素をターゲットにします。

path {
  fill: blue;
}

WebKit または Gecko ベースのブラウザを使用していると仮定すると、この外部 CSS はパスのネイティブの fill 属性をオーバーライドする必要があります。パス タグでスタイルを指定した場合 (例: )、それが外部 CSS よりも優先されることに注意してください。

以上がCSSでSVGパスの塗りつぶしの色を変更できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。