我這樣使用 SVG:
<image x="0" y="0" width="40" height="40" href="/resource.svg"></image>
這是資源.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>
現在,我應該動態更改 svg 的顏色。為此,我考慮是否可以完全加載 SVG(內聯?)而不是作為鏈接,然後替換填充和描邊的值(使用字符串替換)。如果我內聯使用它,是否也可以透過 CSS 實現這一點?
有人可以幫助我這是否可能嗎?如果可以,我必須朝哪個方向進一步研究?
從 svg 程式碼中刪除 fill 屬性。這迫使它始終是白色的,就像現在一樣。 或者,如果您在框架中工作,則可以使 fill 屬性動態化(例如
fill={{myProp}}
)。