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

Question

我想使用JavaScript动态更改图像的颜色。我能够使用JavaScript加载svg路径并更改颜色，但我还想使用更复杂的图像。(例如，当我动态改变外部图像颜色时，中心椭圆应该是黑色的。)

这是我更简单的例子:一个缺一个洞的椭圆形;我可以在JavaScript中动态上色。

var color = 'red';
var svgSource = "<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='250' height='150'><path stroke='black' stroke-width='2' fill='" + color + "' d='M 122.55664 14.691406 A 93.393089 51.964569 0 0 0 30.900391 67.289062 A 93.393089 51.964569 0 0 0 124.86133 118.61133 A 93.393089 51.964569 0 0 0 217.67969 66.648438 L 217.65039 65.365234 A 93.393089 51.964569 0 0 0 122.55664 14.691406 z M 91.923828 63.494141 A 47.749851 20.034533 0 0 1 140.54297 83.03125 L 140.55664 83.525391 A 47.749851 20.034533 0 0 1 93.101562 103.56055 A 47.749851 20.034533 0 0 1 45.060547 83.773438 A 47.749851 20.034533 0 0 1 91.923828 63.494141 z' /></svg>";
// display image
document.getElementById("image").innerHTML = "<img src="data:image/svg+xml;utf8," + svgSource + "">";;

<div id="image"></div>

问题:如何在更复杂的路径中做到这一点?

我的更复杂的对象由两条路径组成，颜色变化的外部形状:

M 217.67871,66.647797 A 93.393089,51.964569 0 0 1 124.86224,118.61138 93.393089,51.964569 0 0 1 30.899652,67.289449 93.393089,51.964569 0 0 1 122.55587,14.692141 93.393089,51.964569 0 0 1 217.65023,65.364589

和由

定义的实心黑色内椭圆

M 140.55713,83.526031 A 47.749851,20.034533 0 0 1 93.102092,103.56018 47.749851,20.034533 0 0 1 45.061071,83.773416 47.749851,20.034533 0 0 1 91.922895,63.494936 47.749851,20.034533 0 0 1 140.54257,83.031301

Answer 1

如果这两个形状组合成一条路径，您将不会有两个填充的形状。通常你最后只会做出一个有洞的形状。而且你不能改变洞的颜色。

你需要做的是有两个单独的<path>元素

Answer 2

我最终用svg标签做了足够的实验，并找出了如何将内圈作为不同的颜色。我认为我需要两个路径元素在我的svg标签(@Paul LeBeau是正确的)，但我一直搞砸语法。每个path应该在它自己的尖括号中:

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

完整的工作示例:

var color = 'red',
    color2 = 'black';
var svgSource = "<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='250' height='150'>" 
      + "<path stroke='black' stroke-width='2' fill='" + color 
      + "' d='M 122.55664 14.691406 A 93.393089 51.964569 0 0 0 30.900391 67.289062 A 93.393089 51.964569 0 0 0 124.86133 118.61133 A 93.393089 51.964569 0 0 0 217.67969 66.648438 L 217.65039 65.365234 A 93.393089 51.964569 0 0 0 122.55664 14.691406 z' />"
      + "<path stroke='black' stroke-width='2' fill='" + color2 
      + "' d='M 91.923828 63.494141 A 47.749851 20.034533 0 0 1 140.54297 83.03125 L 140.55664 83.525391 A 47.749851 20.034533 0 0 1 93.101562 103.56055 A 47.749851 20.034533 0 0 1 45.060547 83.773438 A 47.749851 20.034533 0 0 1 91.923828 63.494141 z' />"
      + "</svg>";
// display image
document.getElementById("image").innerHTML = "<img src="data:image/svg+xml;utf8," + svgSource + "">";;

<div id="image"></div>

注意，为了可读性，我已经将svgSource变量分解为多个字符串，因为我的颜色变量随着添加几个不同颜色的图标而改变。如果您不尝试动态添加颜色，<svg>可以只写为一个长字符串。