動態產生SVG元件並賦予事件。
HTML:
<svg id="svg3" width="400" height="400">
</svg>
Javascript:
//動態產生元件
var svgNode = document.createElementNS("http://www.w3.org/2000/svg", "circle");
svgNode = $(svgNode);
svgNode.attr({
cx: 100,
cy: 100,
r: 50,
fill: "#24C1E0"
});
//賦予元件click事件
svgNode.bind("click", function(event){
$(this).attr({
"fill":"red",//填滿紅色
"transform" : "translate(200,0)"//往X軸方向移動200
});
});
$("#svg3").append(svgNode);