javascript改变svg形状的颜色

Question

嗨有没有办法使用javascript例如使用按钮来改变svg形状的颜色？如果是这样，有人可以指导我正确的方向，谢谢

Answer 1

如果您有许多这些形状，请查看d3 library，它是明确设计的，允许您将数据绑定到svg属性。它的工作方式的一个很好的解释是Three little circles教程。

如果您只想在按钮上单击更改svg形状的属性，则需要按钮的onclick处理程序：

function handleClick() {
    // code to modify svg here, e.g.:
    document.getElementById('svgShapeId').setAttribute('cx',150);
}

document.getElementById('buttonId').onclick = handleClick;

Answer 2

我为你提出了一个简单的jsfiddle。基本上，您将像修改普通DOM元素一样修改相应SVG元素的样式。

Answer 3

这是一个使用JS创建动画元素以根据鼠标上/下突出显示颜色的示例：
http://phrogz.net/SVG/change-color-on-hover.svg

这是一个SVG的例子，它改变了很多颜色，并且放置了一些愚蠢的鼠标悬停按钮：
http://phrogz.net/SVG/rgbhsv.svg

这是一个在XHTML中显示SVG的示例，包含本机HTML小部件（HTML5滑块）以及可拖动的SVG元素（路径句柄）：
http://phrogz.net/SVG/area_of_path.xhtml

一般来说：

1. 查找元素
2. 附加事件处理程序
3. 在事件处理程序中，调整属性（通过设置XML属性或通过SVG DOM）