Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

animatedPathSegList,SVG的Path元素操作

  在SVG中,Path元素是使用最广的元素之一。设置其d属性就可以绘制出一条不规则的路径,通常绘制复杂的图形都是使用它来完成的。Path元素的属性中也有相关的操作接口:animatedPathSegList,它可以提供程序对路径中的某个节点做操作。
<svg width="200" height="200" viewPort="0 0 200 200">
  <rect width="199" height="199" x="0.5" y="0.5" stroke="#000" fill="none" />
  <path id="path" stroke="red" fill="none" d="
    M 20 20
    L 20 180
    L 180 180
    L 180 20
    L 20 20
  " />
</svg>
<script>
var item=path.animatedPathSegList.getItem(0);
var i=item.x,j=2;
setInterval(function(){
  i+=j;
  if(i==180||i==20)j=-j;
  item.x=i;
},16);
</script>
  使用animatedPathSegList方法可以得到路径中的节点项。但这个得到的节点操作还存在一些浏览器差异。Chrome上可以直接修改这些节点的属性,而Firefox修改属性将抛出异常。
NoModificationAllowedError: Modifications are not allowed for this document
  所以上面的实例只有Chrome上可以正常工作。
  另外,每次修改节点的属性会影响整条路径的绘制,由于上面的路径使用的全是绝对位置,所以可能不出影响,如果使用相对路径则可以很明显的看出:
<svg width="200" height="200" viewPort="0 0 200 200">
  <rect width="199" height="199" x="0.5" y="0.5" stroke="#000" fill="none" />
  <path id="path" stroke="red" fill="none" d="
    M 20 20
    l 0 160
    l 160 0
    l 0 -160
    l -160 0
  " />
</svg>
<script>
var item=path.animatedPathSegList.getItem(0);
var i=item.x,j=2;
setInterval(function(){
  i+=j;
  if(i==180||i==20)j=-j;
  item.x=i;
},16);
</script>
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^