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
等があります.
例:
CSS
1path{
2 /*fillはプレゼンテーション属性なので, CSSから値を指定できる*/
3 fill: url(#g);
4}
HTML
1<!--SVGでのグラデーション定義-->
2<svg>
3 <defs>
4 <linearGradient id="g">
5 <stop offset="0" stop-color="black"/>
6 <stop offset="1" stop-color="white"/>
7 </linearGradient>
8 </defs>
9</svg>
10<!--グラデーションを使う側のSVG-->
11<svg>
12 <path d="M0,0h100v100h-100z"/>
13</svg>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/02 07:16