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;
};