Javascript 如何使用JS动态更改复杂svg的颜色

我想使用JavaScript动态更改图像的颜色。我可以使用JavaScript加载svg路径并更改颜色，但我还想使用更复杂的图像。（例如，当我动态更改外部图像颜色时，中心椭圆形应为黑色。）

这是我的简单例子：一个缺少一个洞的椭圆形；我可以用JavaScript动态地给它着色。

var color='red'；
var svgSource=“”；
//显示图像
document.getElementById（“图像”）.innerHTML=“”
如果将两个形状合并到一个路径中，则不会有两个填充形状。你通常只会得到一个有洞的形状。你将无法改变洞的颜色

您需要做的是使用两个独立的
元素
如果将两个形状组合到一个路径中，则不会有两个填充形状。你通常只会得到一个有洞的形状。你将无法改变洞的颜色

你需要做的是有两个独立的
元素
我用
svg
标记进行了足够的实验，并找到了如何将内圈作为不同的颜色。我原以为我的
svg
标记中需要两个path元素（@Paul LeBeau是正确的），但我一直在搞乱语法。每个
路径
应位于其自己的尖括号中：

var svgSource = "<svg ... ><path ... /><path ... /></svg>"

var svgSource=“”

完整工作示例：
var color='red'，
color2=‘黑色’；
var svgSource=“”
+ ""
+ ""
+ "";
//显示图像
document.getElementById（“图像”）.innerHTML=“”
最后，我对
svg
标记进行了足够的实验，并找出了如何将内圈作为不同的颜色。我原以为我的
svg
标记中需要两个path元素（@Paul LeBeau是正确的），但我一直在搞乱语法。每个
路径
应位于其自己的尖括号中：

var svgSource = "<svg ... ><path ... /><path ... /></svg>"

var svgSource=“”

完整工作示例：
var color='red'，
color2=‘黑色’；
var svgSource=“”
+ ""
+ ""
+ "";
//显示图像
document.getElementById（“图像”）.innerHTML=“”
使用CSS设置所需的颜色。我强烈建议使用svg图形库，而不是手动添加字符串。类似于或的内容。@RobertLongson我最初没有指定，但我在一个
div
中有多个（不同颜色的）图像。我是否仍然可以使用CSS为它们着色，而不必嵌套
div
标记？（我实际上是在现有JS库中使用它作为图像引用，我不确定如何在该库中为不同的图像嵌套div标记。这是一个MWE。）@tcooc这听起来确实是一个更干净的方法。谢谢你的建议；我会仔细研究一下。使用CSS设置您想要的颜色。我强烈建议使用svg图形库，而不是手动添加字符串。类似于或的内容。@RobertLongson我最初没有指定，但我在一个
div
中有多个（不同颜色的）图像。我是否仍然可以使用CSS为它们着色，而不必嵌套
div
标记？（我实际上是在现有JS库中使用它作为图像引用，我不确定如何在该库中为不同的图像嵌套div标记。这是一个MWE。）@tcooc这听起来确实是一个更干净的方法。谢谢你的建议；我会调查一下的。谢谢你，我想可能是这样的。我也很难让语法正确工作，但我找到了答案。：）谢谢，我想可能是这样的。我也很难让语法正确工作，但我找到了答案。：）