HTML/CSS

svgをuseタグで読み込んだ時にpath毎に色を変える方法（※IE以外）

svgをuseタグで読み込んだときに、なんとかpath毎に色が変えたくて試行錯誤していたところ、大変素晴らしい記事を見つけました。

参考：SVGアイコンをCSS変数とか併せて良さげに使う

<svg xmlns="http://www.w3.org/2000/svg" class="test-symbol" style="display:none;">
<symbol viewbox="～～～～" id="test">
<g id="ロゴ">
<path class="logo" fill="var(--logo-color, currentColor)" d="～～～～"/>
</g>
<g id="ロゴ一部テキスト">
<path class="logo2" fill="var(--logo2-color, currentColor)" d="～～～～"/>
</g>
</symbol>
</svg>

という風に指定しておき、cssで

.test-symbol{
    --logo-color:red;
    --logo2-color:yellow;
}

と指定することにより、各pathの色を変更できました。素晴らしい。

書いてから気付いたがIE11はCSSのカスタムプロパティ対応してないんですよね･･･。

JavaScriptで対応させる方法もあるみたいなので、今度試してみたいと思います。

RECOMMENDこちらの記事も人気です。