JavaScript来改变svg形状的颜色

嗨有没有使用JavaScript的方式，例如使用按钮来改变svg形状的颜色？如果有的话请引导我在正确的方向谢谢JavaScript来改变svg形状的颜色

来源

2012-04-10 Len

。基本上，您将像修改常规DOM元素一样修改各个SVG元素的样式。

来源

2012-04-10 14:03:35

感谢如果我想添加更多形状，请帮助我如何指定哪个按钮可用于哪种形状？ – Len 2012-04-10 14:38:00

形状元素'id'属性可让您选择要对其执行操作的特定元素。你可以有一组单选按钮，它将更新一些特定的变量，指定元素的“id”来改变颜色。 – 2012-04-10 14:46:24

如果你有这些形状的数量，然后看看d3 library，这是明确设计，允许你绑定数据到svg属性。对其工作方式的一个很好的解释是Three little circles教程。

如果你想只改变一个SVG形状的属性上点击一个按钮，然后你需要为按钮的onclick处理程序：我想出了一个简单的jsfiddle你

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

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

来源

2012-04-10 13:53:34

下面是使用JS创建动画元素基于鼠标选取颜色在输入/输出的一个例子：
http://phrogz.net/SVG/change-color-on-hover.svg

下面是改变许多颜色的SVG的例子，和房子的一些愚蠢的鼠标悬停按钮：
http://phrogz.net/SVG/rgbhsv.svg

以下示范SVG在XHTML的例子，与两个本地HTML小部件（一个HTML5滑块）以及可拖动SVG元素（路径处理）：
http://phrogz.net/SVG/area_of_path.xhtml

一般来说：

查找元件
附加事件处理程序
在事件处理程序，调整性质（无论是通过设置XML属性或经由SVG DOM）

来源

2012-04-10 16:57:36 Phrogz

JavaScript来改变svg形状的颜色

回答

相关问题