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

CSS を使用して SVG パスを動的に色付けする

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

検討してください次の SVG コード:

<svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
  <desc></desc>
  <defs></defs>
  <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
</svg>

内で明示的に変更せずに、CSS またはその他の方法を使用して SVG パスの塗りつぶしの色を変更することは可能ですか? tag?

答え:

はい、CSS を使用して SVG 要素のスタイルを設定することが可能です。ただし、HTML のスタイルを設定するときと同じように、要素をターゲットにする必要があります。すべての SVG パスにスタイルを適用するには、たとえば次のようにします。

path {
  fill: blue;
}

外部 CSS は、WebKit や Gecko などのブラウザでパスの fill 属性をオーバーライドする傾向があります。ただし、塗りつぶしの色を で直接指定する場合は注意することが重要です。タグ (例: ) を使用すると、外部 CSS スタイルがオーバーライドされます。

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