SVG学习备忘录

时间:2021-08-09 13:04:15

最近在写一个基于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

 

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

SVG学习备忘录