如何使用JS动态改变复杂svg的颜色答案

【问题标题】：How to use JS to dynamically change the color of a complex svg如何使用JS动态改变复杂svg的颜色
【发布时间】：2016-10-12 20:33:31
【问题描述】：

我想使用 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 + "\">";;

&lt;div id="image"&gt;&lt;/div&gt;

问题：如何使用更复杂的路径来做到这一点？

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

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

【问题讨论】：

使用 CSS 设置你想要的颜色。
我强烈建议为此使用 svg 图形库，而不是手动添加字符串。类似Raphaël 或svg.js。
@RobertLongson 我最初没有指定，但我在一个div 中有多个（不同颜色的）图像。我可以不用嵌套div标签而使用CSS来给它们上色吗？（我实际上将它用作现有 JS 库中的图像引用，我不确定如何使用该库为不同图像嵌套 div 标签。这本来是一个 MWE。）
@tcooc 这听起来确实是一种更清洁的方式。感谢您的建议;我会稍微研究一下。

标签： javascript svg

【解决方案1】：

如果将两个形状组合成一条路径，则不会有两个填充形状。您通常只会得到一个带有孔的形状。而且您将无法更改孔的颜色。

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

【讨论】：

谢谢，我想可能是这样。我也无法让语法正常工作，但我想通了。 :)

【解决方案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 + "\">";;

&lt;div id="image"&gt;&lt;/div&gt;

请注意，为了便于阅读，我已将 svgSource 变量分解为多个字符串，并且因为我的颜色变量会随着我添加几个不同颜色的图标而发生变化。如果您不想动态添加颜色，<svg> 可以写成一个长字符串。

【讨论】：