svg

日期:2014-8-1 10:17 | 标签: | 阅读:623

SVG,全称为Scalable Vector Graphics,本质是对html的一种补充,可以用来绘图、制作动画。在我看来,SVG对编程的最大好处就是可以通过JS直接来操作和通过CSS修改样式

加载

关于SVG嵌入到HTML中的方法可为琳琅满目,

  1. 直接插入SVG代码
    这样可以与html共享document,从而可以使用如document上的方法直接操作svg元素。
  2. 使用img或者背景插入到html,无法通过js来操作的,更多关于svg作为图片的应用,可参考京东凹凸团队文章拥抱Web设计新趋势:SVG Sprites实践应用
  3. 使用object、embed或者iframe插入时,拥有自己的document,使用object或iframe引入SVG文档,除了getSVGDocument(),还可以使用contentDocument属性来获取其引入文档对应的document对象。区别在于如果是引入的不是SVG文件,而是XML或者HTML等等,contentDocuement依然会返回对象,而getSVGDocument()则返回null。(注:得符合同源策略才行)

JS操作svg

创建

创建svg元素比创建dom元素略显复杂,还需要添加对应的命名空间

var a = document.createElementNS('http://www.w3.org/2000/svg','a');
        a.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://yipeng.info/');
        var c = document.createElementNS('http://www.w3.org/2000/svg','circle');
        c.setAttribute('cx', 10);
        c.setAttribute('cy', 10);
        c.r.baseVal.value = 7;
        c.setAttribute('fill', 'green');
        a.appendChild(c);
        document.rootElement.appendChild(a);

修改属性

当需要改变某个svg属性时可以使用setAttribute或者直接使用.操作符,很多人误以为可以操作style来实现,但的确可以通过添加class来批量设置属性。但是一般推荐使用setAttribute,因为有些属性不是默认就有的!

窗口坐标系的转换

具体可以参考MDN

使用特性

  1. SVG 能通过 viewBox 属性就完成图形的位移与缩放。
  2. preserveAspectRatio 属性你可以控制用户坐标系的展开方式与位置preserveAspectRatio="[defer] <align> [<meetOrSlice>]"
  3. 关于画曲线 svg画曲线demo
  4. 画贝塞尔曲线
    <svg width="190" height="160">
    <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
    </svg>
    

Raphael.JS

直接使用svg就像是直接使用原生js而不使用jquery,Raphael很好的将一些琐碎的细节封装起来,此外也解决了一些浏览器兼容bug。
比如你要画弧可以直接这么干:

var obj = Raphael(domId, width, height);
// 参数:x轴半径 y轴半径 x轴旋转 大角还是小角 顺时针(1)/逆时针(0)旋转 终点x 终点y
obj.path(["A", rx , ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y]);

当然这是跟svg api直接挂钩的,其余路径参数类型还有

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

有意思

  1. 设置svg组件的id不能用关键字id,而应该用data-id
  2. 怎么给 text 中字体加粗?

参考

JavaScript操作SVG的一些知识
三看 SVG Web 动效-凹凸实验室
纯CSS实现帅气的SVG路径描边动画效果-张鑫旭

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式