javascript更改svg形状的颜色

您好，有没有一种使用javascript的方法，例如使用按钮来更改svg形状的颜色？如果是这样的话，请有人指导我正确的方向，谢谢

如果您有许多这样的形状，请查看，它的设计明确允许您将数据绑定到svg属性。本教程很好地解释了它的工作方式

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

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

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

---

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

下面是一个使用JS创建动画元素的示例，以基于鼠标移到/移出来突出显示颜色：

下面是一个SVG示例，它可以改变很多颜色，并包含一些愚蠢的鼠标悬停按钮：

下面的示例显示了XHTML中的SVG，它既有本机HTML小部件（HTML5滑块），也有可拖动的SVG元素（路径句柄）：

一般而言：

查找元素

附加事件处理程序

在事件处理程序中，调整属性（通过设置XML属性或通过）

---

感谢您的帮助如果我想添加更多形状，我将如何指定哪个按钮可用于哪个形状？shape元素

id

属性允许您选择要执行操作的特定元素。您可以使用一组单选按钮来更新某些特定变量，指定元素的

id

，以更改其颜色。