[SVG]元件屬性控制

動態產生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);