svgをhtmlでインライン無しで色変更したい
なかなか良い方法がない。色変えたいだけなのに。 いろんなところで同じsvgファイルを使うので、インラインはしたくない。
候補1
filterで色を付ける。 かなり特殊なやり方だが、今のところ下記が一番シンプルかも。
svgをJSなし・インライン読み込みなしで自由に色を変更する方法! | ブルーシュ
この記事の通り、黒色にフィルターをかけて色を制御するが、黒にかけるフィルターは下記で生成する。
https://codepen.io/sosuke/pen/Pjoqqp
候補2
下記のサイトにあるとおり、
<svg> <use xlink:href="./xxxx.svg#symbol" /> </svg>
のような形式して指定する方法。 ただし、これの場合、svgタグのせいで、変な領域を確保してしまう。 単純にxxxx.svgの領域と同じにしたい場合は、上記のsvgタグにもxxxx.svgと同じwidth, hightを指定する必要あり。 そうなると、若干インラインしている感じになりそう。。微妙。
(あと画像の拡大縮小もうまくできなかった。)
どうに回避策はないか。。。。
候補3
mask + 背景色
トリッキーだがこんなのもあるんだな。