SVG学习备忘录

最近在写一个基于SVG的前端流程图\拓扑图图形框架。

一些容易忽略的问题备忘如下：

1、JS添加SVG元素需要使用document.createElementNS("http://www.w3.org/2000/svg", tagName);

2、<g>标签可以使用getBBox()来获取位置信息，在当前框架中我取用了父级的位置来维护相对位置信息。

3、截至今天，context-fill和context-stroke在chrome和firefox上暂时没用。

4、viewbox在ie上的展示情况和其他浏览器可能不一致

5、ie不支持声明性动画，animationTransform

6、使用requestAnimationFrame来控制动画,cancleAnimationFrame(id)来终止

7、getBBox()可以获取图形的整体(x,y,width,height)信息，但是transform="translate(x,y)"改变的位置不会体现在getBBox里

8、svg image的href需要本地设置，使用image.setAttributeNS("http://www.w3.org/2000/svg", 'href',URL); 注意这里是href不是xlink:href

 

框架目前实现的样图如下：