svg动画定位到动画结束点_如何设计，编码和动画化SVG

svg动画定位到动画结束点

by Surbhi Oberoi

由Surbhi Oberoi

如何设计，编码和动画化SVG (How to Design, Code, and Animate SVGs)

You can think of Scalable Vector Graphics (SVG’s) as responsive graphics. SVG is an XML-based format that allows you to create an image by using defined tags and attributes. Your code will render an image that you can edit right in your code editor.

您可以将可伸缩矢量图形(SVG)视为响应图形。 SVG是基于XML的格式，允许您使用定义的标签和属性来创建图像。 您的代码将呈现一个图像，您可以在代码编辑器中直接对其进行编辑。

Here’s a sample SVG. If you look at its code, you’ll notice that it’s made up of tags and attributes, just like an HTML document. The whole thing is contained inside <svg> tag. First, there’s a <rect> tag with black strokes and white fill. And inside that, there’s an ellipse (almost a circle, but notice the ry and rx attributes) which is filled with red color.

这是示例SVG。 如果查看其代码，您会注意到它是由标签和属性组成的，就像HTML文档一样。 整个内容都包含在<svg>标记内。 首先，有一个带有黑色笔划和白色填充的<rect>标记。 在其中，有一个椭圆(几乎是一个圆形，但请注意ry和rx属性)，该椭圆用红色填充。

We can use SVG on the web in two ways. We can use the SVG files as the src attribute of <img> tags. So, you can have <img src=”japan.svg”> like you would do with PNGs and JPEGs.

我们可以通过两种方式在网络上使用SVG。 我们可以将SVG文件用作<img>标签的src属性。 因此，您可以像使用PNG和JPEG一样具有<img src =” japan.svg”>。

But, the more interesting case (in case you have noticed that the tags have an id attribute like HTML) is that we can directly paste the source of the SVG in a <div> inside our HTML. We can then style these divs like individual building blocks — or even groups of building blocks — the way we want. We can apply CSS, animations, or even add interactivity using JavaScript. This is what makes SVGs one of the most versatile and hottest element right now in HTML.

但是，更有趣的情况(以防您注意到标记具有HTML之类的id属性)是我们可以将SVG的源代码直接粘贴到HTML内的<div>中。 然后，我们可以按照自己的方式将这些div样式设置为单个构建基块，甚至是多个构建基块。 我们可以应用CSS，动画，甚至可以使用JavaScript添加交互性。 这就是使SVG成为HTML中目前功能最多，最热门的元素之一的原因。

SVGs are infinitely scalable, responsive, have smaller file size, are future-proof for next-generation bazillion-pixel dense screens, and can be styled, animated and interacted with using known web technologies — namely CSS and JavaScript.

SVG具有无限的可扩展性，响应能力，文件大小较小，对于下一代兆像素密集屏幕而言是面向未来的，并且可以使用已知的Web技术(即CSS和JavaScript)进行样式设置，设置动画和进行交互。

Notice that all these things were previously possible only with a Flash embed — which required a flash player and lots of specialized work. And there’s no love going around for Flash these days.

请注意，所有这些事情以前只有通过Flash嵌入才有可能实现，这需要Flash播放器和许多专门的工作。 这些天来，Flash充满了爱。

矢量与栅格图像 (Vector vs Raster images)

Raster images are made up of pixels to form a complete image. JPEGs, GIFs and PNGs are common raster image types.