SVG与JavaScript的结合（1）

<?xml version="1.0" standalone="no" ?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="640" height="480" version="1.1"    xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink"   onload="init(evt)">

<script>

<![CDATA[

function init(evt){

svgdoc=evt.target.ownerDocument;

<!--获取SVG文档对象-->

root=svgdoc.rootElement;

<!--获取SVG文档对象的根元素，此例子中获取的<svg>元素-->

}

function change(evt){

obj=evt.target;

<!--获取当前节点，从哪个元素调用的就获取哪个元素，此例中是<rect>-->

node=svgdoc.createElement("circle");

     <!--创建新节点，名为node。该节点是个圆。通过<circle>来定义-->

node.setAttribute("cx",200);

node.setAttribute("cy",200);

node.setAttribute("r","100");

node.setAttribute("style","fill:red");  

                <!--给<circle>定义圆心（cx,cy），半径r,颜色-->

root.replaceChild(node,obj);

                <!--node节点替代root节点下的obj节点-->

}

]]>

</script>

<rect x="200" y="200" width="100" height="50"                       style="fill:green" onclick="change(evt)" />

      <!--触发点击事件后，绿色的矩形变成了上面新建的红色的圆-->

</svg>

这是一个简单的SVG与Javascript结合的例子。通过javascript，可以实现SVG的动态交互性。