SVG中国

文章索引
蓝骑士SVG教程:SVG动态与动画
第一课 SVG的变形属性
第二课 SVG动画
第三课 结合JavaScript产生SVG动画
第四课 SVG鼠标事件
第五课 SVG键盘事件
第六课 动态插入SVG元素
所有页面

　　我们已经看到(defs)和(style)这两个元素能够在定义之后被后续的过程引用产生更多的元素.类似的,(use)元素也能定义为一个SVG元素或SVG物件,在SVG文件中被成倍的调用.

　 　SVG的一个特征是它支持W3C DOM标准.这意味着,使用如JavaScript这样的语言,你能够完成非常流畅的SVG作品.在浏览器中,每一个SVG文件中的独立部分成为文件树状 结构的一个节点."引用JavaScript",你能够定义,删除和改变它在文件树状结构的位置,或者简单的添加一些新节点.这是发展SVG动态图像文件 的关键点.让我们来看一个简单的文件:

　　每一个蓝色小圆点代表树的一个节点.一些节点,例如(g)和(text),包含了子节点,而另一些则没有.

　 　我们已经看了几个利用JavaScript访问文件树状结构的节点的例子.特别是我们已经使用了SVG规范中的getElementById()的方法 来重新获得一个已命名的节点.我们也使用了XML Core DOM中的getFirstChild()来获得文本元素(text)的节点.

　　在本教程中,我们也检验另一些移动和插入新节点的方法.在下面的例子中,试着点击中央被分层的物件(在底座上的),我们能看到物件被移动到最下面的层中,这就是说,物件被移动到文件树状结构的更高处,所以被安置在表层物件之后.

　　请在下面的图像中的底座上方点击鼠标:



　　当你点击图像中的物体时,SVG元素触发了onclick事件的arrange_me() JavaScript过程函数.例如:

　　在arrange_me() JavaScript过程函数中,一旦我们重新获得物件的节点(事件的目标),和节点的父节点,我们就能分两步将物体移动到后面:

　　1.我们使用父节点的removeChild()函数在文件树状结构中移动物件:groupnode.removeChild (target);

　　2.我们使用insertBefore()和getFirstChild()函数重新定位并插入节点,使之成为新节点:groupnode.insertBefore (target, groupnode.getFirstChild());

　　利用类似的概念,我们可以把物件移动到前方,后方,某一个物件前或另一组物件中.

　　现在让我来看看一种在SVG文件中加入节点的方法.在上面同一个例子中,请点击底部一行任意一个黑色图标.这能随即在图像中自动复制出一个图案,这就是说,图标物件被复制并在文件树状结构中加入了一个新节点.

　　这里,当你点击一个图标时,SVG元素触发了onclick事件的clone_me() JavaScript过程函数.例如:

　　在clone_me() JavaScript过程函数中,一旦我们获得物件节点(事件的目标),我们就能通过下面的步骤在SVG文件中复制并加入新的节点:

　　1.我们使用cloneNode()函数"克隆"物件节点:var newnode = target.cloneNode(false);

　 　2.克隆的节点能够像其他的节点一样被自由的控制,我们能够改变它的形状和属性,例如: newnode.setAttribute ('x', x); newnode.setAttribute ('y', y); newnode.getStyle().setProperty ('fill', fill);

　　3.最后,我们使用getElementById()函数重新获得原来节点的标识,使用 appendNode()函数在文件中添加克隆的节点: var contents = svgdoc.getElementById ('contents'); newnode = contents.appendChild (newnode);

　　我们自由的复制了节点,你也同样可以自由的创建一些新节点,使用一些方法插入到文件树状结构中去.

　 　继续下一步学习，请进入“蓝骑士SVG教程:SVG后续工作”部分。 

(THE END)