将 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}}）。