☰

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

tag-icon • tag-icon css svg
CSS で SVG パスの塗りつぶし色を変更できますか? 質問する

次のコードがあります:

<span>
   <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/>
      <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>
</span>

タグ内で実際に変更せずに、CSS またはその他の手段を使用して SVG パスの塗りつぶし色を変更することは可能ですか<path>?

ベストアンサー1

はい、CSS を SVG に適用することはできますが、HTML のスタイル設定時と同様に、要素を一致させる必要があります。すべての SVG パスに適用したい場合は、たとえば次のようにします。

​path {
  fill: blue;
}​

少なくとも私がテストした WebKit および Gecko ベースのブラウザでは、外部 CSS がパスのfill属性を上書きするようです。もちろん、たとえば次のように記述すると、<path style="fill: green">外部 CSS も上書きされます。

おすすめ記事