Laden Sie SVG inline und ändern Sie die Füllfarbe

Question

So verwende ich SVG:

<image x="0" y="0" width="40" height="40" href="/resource.svg"></image>

Dies ist die Ressource.svg:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="217px" height="131px" viewBox="-0.5 -0.5 217 131"><defs/><g><ellipse cx="108" cy="65" rx="108" ry="65" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><ellipse cx="108" cy="65" rx="40" ry="40" fill="#a0522d" stroke="#6d1f00" pointer-events="all"/></g></svg>

Jetzt sollte ich die Farbe der SVG-Datei dynamisch ändern. Zu diesem Zweck habe ich überlegt, ob ich die SVG-Datei vollständig (inline?) und nicht als Link laden und dann die Werte für Füllung und Strich ersetzen könnte (mittels String-Ersetzung). Wenn ich es inline verwende, ist das auch mit CSS möglich?

Kann mir jemand helfen, wenn das möglich ist? Wenn ja, in welche Richtung muss ich weiter recherchieren?

Answer 1

从 svg 代码中删除 fill 属性。这迫使它始终是白色的，就像现在一样。 或者，如果您在框架中工作，则可以使 fill 属性动态化（例如 fill={{myProp}}）。