SVGをインラインでロードして塗りつぶしの色を変更する

Question

私はSVGを次のように使用します:

リーリー

これは resource.svg です:

リーリー

次に、SVG の色を動的に変更する必要があります。これを行うために、SVG をリンクとしてではなく完全に (インラインで?) ロードし、塗りつぶしとストロークの値を (文字列置換を使用して) 置き換えることができるかどうかを検討しました。インラインで使用する場合、CSSでも可能でしょうか？

可能であれば誰か助けてくれませんか?もしそうなら、どの方向にさらに研究する必要がありますか?

Answer 1

SVG コードから fill 属性を削除します。これにより、現在のように常に白になることが強制されます。 あるいは、フレームワークで作業している場合は、fill プロパティを動的にすることもできます (例: fill={{myProp}})。