Charger SVG en ligne et modifier la couleur de remplissage
P粉323224129
P粉323224129 2024-04-02 13:32:42
0
1
379

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 ?

P粉323224129
P粉323224129

répondre à tous(1)
P粉639667504

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}}).

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal