javascript - javascript改变svg形状的颜色

Question

嗨，有没有一种使用 javascript 的方法，例如使用按钮来更改 svg 形状的颜色？如果可以的话，请指导我正确的方向谢谢

Answer 1

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

如果您只想在单击按钮时更改 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）