你可以把这篇文章看做通往精通SVG动画之路的第一步,里面的链接资源也是很好的学习资料。所以赶紧收藏本文然后开始你的精通SVG之旅吧。
SVG元素是一种特殊的DOM元素,语法模仿了标准的HTML元素。SVG元素有着独有的标签,属性和行为,能够让它很容易的定义各种形状——能够直接在DOM中创造图像,因此能够被JavaScript和CSS操作。
作为初学者,你们可以看看这些SVG才能实线的效果:
在此有三个使用SVG创建图像而不是用图片(PNG, JPET, etc)的好处:
创造SVG图像,你即可以直接使用其DOM元素呈现,也可以使用你喜爱的图像编辑软件绘画然后导出SVG文件拷贝它的代码粘贴到HTML中即可。对于初学者,可以看这篇很棒的文章:Working With SVG。
无论jQuery还是CSS transitions都没提供SVG动画样式属性(位置,尺寸属性)的完整支持。在IE 9 中不容许CSS transitions动画SVG元素,在IE所有版本中也不能使用CSS transforms动画SVG元素。
因此,要动画SVG元素,你要么使用专门的SVG操控库,或者使用支持SVG的JavaScript动画库。前者最有名的是Snap.svg,后者则是Velocity.js,Velocity.js轻量而且跨浏览器支持良好,是wen动画的绝佳选择,本文的例子就使用的事这个动画库。
在需要动画SVG元素的时候Velocity.js会自动检测,然后无缝的对其施加SVG的特定属性而无需你更改任何代码。
SVG元素只接受少数的几个标准的CSS属性,另外SVG接受一些“表意性(presentational)”,譬如fill
,x
,y
。这些属性也用来定义SVG如何渲染。通过CSS定义SVG样式和直接在SVG元素上使用这些属性,本身在功能上没什么不同,SVG规范中也很少区分讨论。
下面的例子中SVG的circle
元素和紧接着的SVGrect
元素两者都包含在一个声明性(mandatory)的SVG容器元素中(这样也就告诉浏览器里面包含的是SVG标记而不是HTML标记)。请注意,颜色是如何通过CSS定义,而尺寸又是如何通过属性定义。
<svg version="1.1" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="200" _style="fill: blue" />
<rect x="100" y="100" width="200" height="200" _style="fill: blue" />
</svg>
(还有一些其他的SVG元素,譬如ellipse
,line
,text
等,更多可以查看MDN)。
SVG样式属性有三大类:color,gradient,dimensional和storke。查看SVG元素的CSS动画属性和表现属性的完整列表可以访问Velocity.js的SVG animation documentation。
CSS属性包含fill
和stroke
,fill
相当于background-color
,而stroke
也就相当与border-color
。使用Velocity,这些属性的动画的方式和标准的属性并无二致。
// Animate the SVG element to a red fill and a black stroke
$svgElement.velocity({ fill: "#ff0000", stroke: "#000000" });
// Note that the following WON'T work since these CSS properties are NOT supported by SVG:
$svgElement.velocity({ backgroundColor: "#ff0000", borderColor: "#000000" });
gradient渐变属性包含stopColor
,stopOpacity
,offset
。用他们你可以构造出任何你想要的渐变效果。了解更多可以查看MDN’s SVG Gradient Guide。
dimensional维度(尺寸,空间)属性描述了SVG元素的位置和尺寸。这些属性和SVG的形状元素有些轻微的不同。
// Unlike HTML, SVG positioning is NOT defined with top/right/bottom/left, float, or margin properties
// Rectangles have their x (left) and y (top) values defined relative to their top-left corner
$("rect").velocity({ x: 100, y: 100 });
// In contrast, circles have their x and y values defined relative to their center (hence, cx and cy properties)
$("circle").velocity({ cx: 100, cy: 100 });
// Rectangles have their width and height defined the same way that DOM elements do
$("rect").velocity({ width: 200, height: 200 });
// Circles have no concept of "width" or "height"; instead, they take a radius attribute (r):
$("circ").velocity({ r: 100 });
Stroke笔画属性是特殊的SVG的样式属性,和CSS中的border
类似,但不同的两点式,可以创造自己的笔画Strokes,还可以动画笔画。用例包括书写效果,和逐渐显露等。更多SVG Stroke动画可以查看SVG Line Animation。
将这些放到一起,使用Velocity.js的Demo:http://codepen.io。
你或许想知道使用x/cx y/cy位置属性和CSS transforms(譬如,translateX,translateY)的区别在哪里?答案便是浏览器的支持,IE(包括IE11)不支持SVG元素的CSS transforms。而对于硬件加速来说,所有的浏览器(包括IE)都默认支持位置属性的硬件加速——因此,对于SVG的动画性能,SVG属性和CSS属性相等。
总结:
// The x and y attributes work everywhere that SVG elements do (IE8+, Android 3+)
$("rect").velocity({ x: 100, y: 100 });
// Alternatively, positional transforms (such as *translateX* and *translateY*) work everywhere EXCEPT IE
$("rect").velocity({ translateX: 100, translateY: 100 });
通过本篇,再配合MDN’s SVG guide你便可以更好的使用SVG啦!