svg路径动画简易指南_SVG动画简单介绍

svg路径动画简易指南

This article serves as a first step toward mastering SVG element animation. Included within are links to key resources for diving deeper, so bookmark this page and refer back to it throughout your journey toward SVG mastery.

本文是掌握SVG元素动画的第一步。 其中包含指向更深层次潜水的关键资源的链接，因此，请为该页面添加书签，并在您精通SVG的整个过程中参考该页面。

An SVG element is a special type of DOM element that mimics the syntax of a standard HTML element. SVG elements have unique tags, attributes, and behaviors that allow them to define arbitrary shapes -- essentially providing the ability to create an image directly within the DOM, and thereby benefit from the JavaScript- and CSS-based manipulation that DOM elements can be subjected to.

SVG元素是一种特殊的DOM元素，它模仿标准HTML元素的语法。 SVG元素具有独特的标签，属性和行为，使它们可以定义任意形状-本质上提供了直接在DOM中创建图像的能力，从而受益于DOM元素可以经受基于JavaScript和CSS的操作至。

As a teaser of what we're about to learn, check out these demos that are only possible thanks to SVG:

作为我们将要学习的知识的预告片，请查看以下只有SVG才可能实现的演示：

Typographic Demo 印刷演示 Isotyope Demo Isotyope演示 Shape Demo 形状演示 Handwriting Demo 手写演示

There are three significant benefits to creating graphics in SVG rather than using rendered images (PNG, JPEG, etc.): First, SVG compresses incredibly well; graphics defined in SVG have smaller file sizes than their PNG/JPEG equivalents. Second, SVG graphics scale to any resolution without the loss of clarity; they look razor sharp on all desktop and mobile screens. Third, you can animate the individual components of an SVG graphic at run-time (using JavaScript and CSS).

与使用渲染图像(PNG，JPEG等)相比，用SVG创建图形有三个明显的好处：首先，SVG压缩得非常好； SVG中定义的图形的文件大小小于其PNG / JPEG等效文件。 其次，SVG图形可缩放至任何分辨率而不会损失清晰度。 在所有台式机和手机屏幕上，它们看起来都非常锋利。 第三，您可以在运行时为SVG图形的各个组件制作动画(使用JavaScript和CSS)。

To create an SVG graphic, either design it by hand using DOM elements to represent each piece of your graphic, or use your favorite photo editor to draw arbitrary shapes then export the resulting SVG code for copy-pasting into your HTML. For a primer on exporting SVGs, read this fantastic article: Working With SVG.

要创建SVG图形，请使用DOM元素手工设计以代表图形的每一部分，或者使用您喜欢的照片编辑器绘制任意形状，然后将生成的SVG代码导出以复制粘贴到HTML中。 有关导出SVG的入门知识，请阅读以下精彩文章： 使用SVG 。

SVG动画 (SVG Animation)

Neither jQuery nor CSS transitions offer complete support for the animation of SVG-specific styling properties (namely, positional and dimensional properties). Further, CSS transitions do not allow you to animate SVG elements on IE9, nor can they be used to apply transforms to SVGs on any version of IE.

jQuery和CSS转换都没有完全支持SVG特定样式属性(即位置和尺寸属性)的动画。 此外，CSS过渡不允许您在IE9上设置SVG元素的动画，也不能用于在任何版本的IE上将转换应用于SVG。

Accordingly, to animate SVG elements, either use a dedicated SVG manipulation library or a JavaScript animation library that has support for SVG. The most popular dedicated SVG manipulation library is Snap.svg, and the most popular JavaScript animation library with SVG support is Velocity.js. Since Velocity.js contains extensive cross-browser SVG support, is lightweight, and should already be your weapon of choice for web animation, that's the library we'll be using in this article.

因此，要为SVG元素设置动画，请使用专用的SVG操作库或支持SVGJavaScript动画库。 最受欢迎的专用SVG操作库是Snap.svg ，最流行的具有SVG支持JavaScript动画库是Velocity.js 。 由于Velocity.js包含广泛的跨浏览器SVG支持，是轻量级的，并且应该已经成为您选择Web动画的武器，因此我们将在本文中使用该库。

Velocity.js automatically detects when it's being used to animate an SVG element then seamlessly applies SVG-specific properties without you having to modify your code in any way.

Velocity.js会自动检测何时将其用于设置SVG元素的动画，然后无缝地应用特定于SVG的属性，而无需以任何方式修改代码。

SVG样式 (SVG Styling)

SVG elements accept a few of the standard CSS properties, but not all of them. (More on this shortly.) In addition, SVGs accept a special set of "presentational" attributes, such as fill, x, and y, which also serve to define how an SVG is visually rendered. There is no functional difference between specifying an SVG style via CSS or as an attribute -- the SVG spec merely divides properties amongst the two.

SVG元素接受一些标准CSS属性，但不是全部。 (稍后将对此进行更多介绍。)此外，SVG接受一组特殊的“呈现”属性，例如fill ， x和y ，它们也用于定义SVG的视觉呈现方式。 通过CSS指定SVG样式或将其作为属性没有功能上的区别-SVG规范仅将属性划分为两者。

Here is an example of an SVG circle element next to an SVG rect element -- both of which are contained inside a mandatory SVG container element (which tells the browser that what's contained within is SVG markup instead of HTML markup). Notice how color styles are defined using CSS, but dimensional properties are defined via attributes:

这是SVG rect元素旁边的SVG circle元素的示例-两者都包含在必需的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>

(There are other special SVG elements, such as ellipse, line, and text. For a complete listing, refer to MDN.)

(还有其他特殊的SVG元素，例如ellipse ， line和text 。有关完整列表，请参阅MDN 。)

There are three broad categories of SVG-specific styling properties: color, gradient, dimensional, and stroke. For a full list of SVG elements' animatable CSS properties and presentational attributes, refer to Velocity.js's SVG animation documentation.

SVG特定的样式属性分为三大类： 颜色 ， 渐变 ， 尺寸和笔触 。 有关SVG元素的可动画CSS属性和表示属性的完整列表，请参见Velocity.js的SVG动画文档 。

The color properties consist of fill and stroke. fill is equivalent to background-color in CSS, whereas stroke is equivalent to border-color. Using Velocity, these properties are animated the same way that you animate standard CSS properties:

颜色属性包括填充和描边 。 fill等效于CSS中的background-color ，而stroke等效于border-color 。 使用Velocity，对这些属性进行动画处理的方式与对标准CSS属性进行动画处理的方式相同：

// 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" });

The gradient properties include stopColor, stopOpacity, and offset. They are used to define multi-purpose gradients that you structure via SVG markup. To learn more about SVG gradients, refer to MDN's SVG Gradient Guide.

渐变属性包括stopColor ， stopOpacity和offset 。 它们用于定义通过SVG标记构造的多用途渐变。 要了解有关SVG渐变的更多信息，请参阅MDN的SVG渐变指南 。

The dimensional properties are those that describe an SVG element's position and size. These attributes differ slightly amongst SVG element types (e.g. rect vs. circle):

尺寸属性是描述SVG元素的位置和大小的属性 。 这些属性在SVG元素类型之间略有不同(例如rect与circle )：

// 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 properties are a unique set of SVG styling definitions that amount to putting the CSS border property on steroids. Two key differences from border are the ability to create custom strokes and the ability to animate a stroke's movement. Use cases include handwriting effects, gradual reveal effects, and much more. Refer to SVG Line Animation for an overview of SVG stroke animation.

笔触属性是一组独特的SVG样式定义，相当于将CSS border属性置于类固醇上。 与边框的两个主要区别是创建自定义笔划的能力和为笔划的运动设置动画的能力。 用例包括手写效果，渐进式显示效果等等。 有关SVG笔触动画的概述，请参考SVG线动画。

Putting it all together, here's a complete SVG animation demo using Velocity.js:

综上所述，这是使用Velocity.js的完整SVG动画演示：

See the Pen Velocity.js - Feature: SVG by Julian Shapiro (@julianshapiro) on CodePen.

请参阅CodePen上的Pen Velocity.js-功能： Julian Shapiro( @julianshapiro )的SVG 。

Fork that pen and start toying around with SVG animation.

分叉那支笔，开始玩弄SVG动画。

位置属性与CSS转换 (Positional Attributes vs. CSS Transforms)

You may be wondering, What's the difference between using the x/cx y/cy positional attributes instead of using CSS transforms (e.g. translateX, translateY)? The answer is browser support: IE (including IE11) do not support CSS transforms on SVG elements. As for the topic of hardware acceleration, all browsers (including IE) hardware-accelerate positional attributes by default -- so, when it comes to SVG animation performance, attributes are equivalent to CSS properties.

您可能想知道，使用x / cx y / cy位置属性与使用CSS转换(例如，translateX，translateY)有什么区别？ 答案是浏览器支持 ：IE(包括IE11)不支持SVG元素上CSS转换。 至于硬件加速的主题，默认情况下，所有浏览器(包括IE)都通过硬件加速位置属性-因此，就SVG动画性能而言，属性等同于CSS属性。

To summarize:

总结一下：

// 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 });

深潜 (Diving Deeper)

With our introduction to SVG animation complete, head on over to MDN's SVG guide for an in-depth walkthrough of every aspect of working with SVG's.

在我们完整地介绍了SVG动画之后，请继续阅读MDN的SVG指南 ，深入了解使用SVG的各个方面。

翻译自: https://davidwalsh.name/svg-animation

svg路径动画简易指南