黄缙华

黄缙华的博客

他的个人主页  他的博客

SVG与JavaScript的结合(1)

黄缙华  2009年10月20日 星期二 11:24 | 2089次浏览 | 2条评论

可以通过Javascript来为SVG创建新的节点,还可以用新节点替代老的节点。

 

<?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的动态交互性。

评论

我的评论:

发表评论

请 登录 后发表评论。还没有在Zeuux哲思注册吗?现在 注册 !
巩存吉

回复 巩存吉  2009年10月21日 星期三 17:11

内容不错

1条回复

  • 黄缙华

    回复 黄缙华  2009年10月21日 星期三 18:39

    谢谢哈。。希望在这里能够多学习一下,能够交更多的朋友。

    0条回复

暂时没有评论

Zeuux © 2022

京ICP备05028076号