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形狀的顏色

回答

相關問題