Muatkan SVG sebaris dan tukar warna isian

Question

Ini adalah cara saya menggunakan SVG:

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

Ini adalah sumbernya.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>

Sekarang, saya harus menukar warna svg secara dinamik. Untuk melakukan ini, saya mempertimbangkan sama ada saya boleh memuatkan SVG sepenuhnya (sebaris?) dan bukannya sebagai pautan, dan kemudian menggantikan nilai isian dan pukulan (menggunakan penggantian rentetan). Jika saya menggunakannya sebaris, adakah ini juga boleh dilakukan dengan CSS?

Bolehkah seseorang membantu saya jika ini boleh? Jika ya, ke arah manakah saya perlu meneliti lebih lanjut?

Answer 1

Alih keluar atribut isian daripada kod svg. Ini memaksanya untuk sentiasa putih, seperti sekarang. Sebagai alternatif, jika anda bekerja dalam rangka kerja, anda boleh menjadikan sifat isian dinamik (mis. fill={{myProp}}).