將 SVG 載入為內聯並更改填滿顏色

Question

我這樣使用 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 實現這一點？

有人可以幫助我這是否可能嗎？如果可以，我必須朝哪個方向進一步研究？

Answer 1

從 svg 程式碼中刪除 fill 屬性。這迫使它始終是白色的，就像現在一樣。 或者，如果您在框架中工作，則可以使 fill 屬性動態化（例如 fill={{myProp}}）。