Question

我遇到了一本书，提供了用HTML和JavaScript构建着色书的教程和部分代码。我在jsbin中设置了一个项目来测试我的代码，希望可以通过以下链接与大家共享：my source code

我希望用户能够选择颜色，然后单击svg中的某个区域，然后应用该区域。目前，当您点击颜色时，没有任何反应。

Answer 1

如果将代码缩减为简单的测试用例会更好。

但是，我注意到了一些错误：

您正在尝试将事件附加到类colorable的路径。但是，SVG中没有任何内容。

对类进行操作的jQuery函数不适用于SVG元素。这是因为SVG元素的class属性与HTML元素的class元素的类型不同。因此path[class="colorable"]无效。

您需要使用更改此代码：

$('path[class="colorable"]').bind("click", function(event) { 
  // colour changing code
})

类似于：

var paths = document.getElementsByClassName("colorable");
for (var i=0; i<paths.length; i++) {
   $(paths[i]).bind("click", function(event) { 
      // Your colouring code
   });
}

需要帮助应用所选颜色来填充svg中的属性

1 个答案: