[译]SVG动画简介

2022-08-16 14:49:55 浏览数 (1)

toc

你可以把这篇文章看做通往精通SVG动画之路的第一步，里面的链接资源也是很好的学习资料。所以赶紧收藏本文然后开始你的精通SVG之旅吧。

SVG元素是一种特殊的DOM元素，语法模仿了标准的HTML元素。SVG元素有着独有的标签，属性和行为，能够让它很容易的定义各种形状——能够直接在DOM中创造图像，因此能够被JavaScript和CSS操作。

作为初学者，你们可以看看这些SVG才能实线的效果：

  • Typographic Demo
  • Isotyope Demo
  • Shape Demo
  • Handwriting Demo

在此有三个使用SVG创建图像而不是用图片(PNG, JPET, etc)的好处：

  • 首先SVG可以被压缩的很好。
  • 其次，SVG可以在无损的情况下缩放到任何尺寸，在桌面和移动设备屏幕上看起来都很锐利。
  • 最后，你可以在运行的时候(使用JavaScript，CSS)只让SVG图像的一个组件动画。

创造SVG图像，你即可以直接使用其DOM元素呈现，也可以使用你喜爱的图像编辑软件绘画然后导出SVG文件拷贝它的代码粘贴到HTML中即可。对于初学者，可以看这篇很棒的文章:Working With SVG。

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样式

SVG元素只接受少数的几个标准的CSS属性，另外SVG接受一些“表意性(presentational)”，譬如fill，x，y。这些属性也用来定义SVG如何渲染。通过CSS定义SVG样式和直接在SVG元素上使用这些属性，本身在功能上没什么不同，SVG规范中也很少区分讨论。

下面的例子中SVG的circle元素和紧接着的SVGrect元素两者都包含在一个声明性(mandatory)的SVG容器元素中(这样也就告诉浏览器里面包含的是SVG标记而不是HTML标记)。请注意，颜色是如何通过CSS定义，而尺寸又是如何通过属性定义。

代码语言：javascript复制
<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，这些属性的动画的方式和标准的属性并无二致。

代码语言：javascript复制
// 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的形状元素有些轻微的不同。

代码语言：javascript复制
// 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 });
代码语言：javascript复制
// 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。

位置属性 vs. CSS Transforms

你或许想知道使用x/cx y/cy位置属性和CSS transforms(譬如，translateX，translateY)的区别在哪里？答案便是浏览器的支持，IE(包括IE11)不支持SVG元素的CSS transforms。而对于硬件加速来说，所有的浏览器(包括IE)都默认支持位置属性的硬件加速——因此，对于SVG的动画性能，SVG属性和CSS属性相等。

总结：

代码语言：javascript复制
// 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啦！

英文原文：The Simple Intro to SVG Animation

svg html javascript css

0 人点赞