Charger SVG en ligne et modifier la couleur de remplissage

Question

Voici comment j'utilise SVG :

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

Voici la 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>

Maintenant, je devrais changer dynamiquement la couleur du svg. Pour ce faire, j'ai réfléchi à la possibilité de charger le SVG entièrement (en ligne ?) plutôt que sous forme de lien, puis de remplacer les valeurs de remplissage et de contour (en utilisant le remplacement de chaîne). Si je l'utilise en ligne, est-ce également possible avec CSS ?

Quelqu'un peut-il m'aider si cela est possible ? Si oui, dans quelle direction dois-je approfondir mes recherches ?

Answer 1

Supprimez l'attribut fill du code svg. Cela l’oblige à toujours être blanc, comme c’est le cas actuellement. Alternativement, si vous travaillez dans un framework, vous pouvez rendre la propriété fill dynamique (par exemple fill={{myProp}}).