svgをuseタグで読み込んだときに、なんとかpath毎に色が変えたくて試行錯誤していたところ、大変素晴らしい記事を見つけました。
<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で対応させる方法もあるみたいなので、今度試してみたいと思います。