svg，颜色组子元素

Question

我用插画家创建了SVG。 元素在路径上填充。 我正在尝试根据路径所在的组ID更改颜色。

我想在事件发生时将同一组中的所有子元素填充颜色更改为相同颜色。

这是一个jsFiddle： http : //jsfiddle.net/cdcgbu6g/6/

function ChangeColor(zone,color,colorCode) {
document.getElementById(zone).children().css( "fill", colorCode );
};

javascript将在外部.js文件中。

当您单击一个颜色方块时，两个对象上的填充值应更改为在“ Color_1”的组ID下。

我读过的所有内容都说应该可以。

Answer 1

如@Paul LeBeau所述，您的第一个代码片段运行良好，只是jsFiddle配置问题。

但是，在修改帖子时，您带来了一个新错误：

function ChangeColor(zone,color,colorCode) {
   document.getElementById(zone).children().css( "fill", colorCode );
};

这段代码无法正常工作，因为您试图在非jQuery对象（ document.getElementById()确实返回DOM对象）上调用jQuery方法（ .children()和.css() ）。

您可以将此函数重写为：

function ChangeColor(zone,color,colorCode) {
  $('#'+zone).children().css( "fill", colorCode );
};

现在，我们正在调用jQuery对象，并且一切正常，就像在您不使用jQuery的第一个代码段中一样。

Answer 2

如果您在运行Java脚本时进行更改，那么您的提琴就可以正常工作。 如果将其更改为“ No wrap选项之一，则一切正常。

更新：这是为什么？

我没有看jsfiddle到底在做什么，但是我认为它的工作原理如下：

当您使用“ onLoad”选项时，它所做的等同于以下操作：

window.onload = function() {
   // users fiddle JS here
};

这意味着您定义的任何函数（即ChangeColor() ）都将在ready函数的名称空间中定义，并且对HTML事件处理程序不可见。

有两种替代解决方案。 如我上面建议的那样，将运行模式更改为两个“不包装”选项之一。

或者，您可以停留在“ onLoad”模式下并将功能强制到全局名称空间（窗口）或该名称空间下的其他名称中。

window.ChangeColor = function(zone,color,colorCode) {
    document.getElementById(zone).style.fill = colorCode;
};