SVGをCSSでグラデーションさせたい

Question

前提・実現したいこと

HTMLに埋め込んだ「SVG」を色だけ変えて使いまわしたいのですが、
SVGの色を「CSS」でグラデーションにしようと思ったところ、
SVGに直で指定するやり方は出てきたのですが、
CSSを使った指定方法がいくら検索しても出てこなくて困っております。
SVGのグラデーションはCSSでは指定出来ないのでしょうか?
詳しい方教えていただけると助かります。

Answer 1

HTMLに埋め込んだ「SVG」を色だけ変えて使いまわしたいのですが、

インラインSVG(object,image要素を介さない)である前提で回答します.

---

SVGのグラデーションはCSSでは指定出来ないのでしょうか?

SVGのlinarGradient, radialGradient要素で定義したグラデーションであれば, それらをSVGの図形要素にCSSから指定することは可能です.
が, CSSのグラデーション機構(linear-gradient関数等)を直接SVGの図形要素に適用することは残念ながらできません.

NOTE:
一般にSVGにおいてプレゼンテーション属性と呼ばれている属性については, CSSから値を指定することが可能です. プレゼンテーション属性としてはfill, stroke, stroke-width, stroke-linecap等があります.

例:

path{
   /*fillはプレゼンテーション属性なので, CSSから値を指定できる*/
   fill: url(#g);
}

<!--SVGでのグラデーション定義-->
<svg>
 <defs>
  <linearGradient id="g">
    <stop offset="0" stop-color="black"/>
    <stop offset="1" stop-color="white"/>
  </linearGradient>
 </defs>
</svg>
<!--グラデーションを使う側のSVG-->
<svg>
  <path d="M0,0h100v100h-100z"/>
</svg>

Comments

[kihara]

ありがとうございます。助かりました!