最近在写一个基于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
框架目前实现的样图如下: