svg g 嵌入svg_如何将“ animateTransform”用于嵌入式SVG动画

svg g 嵌入svg

今天，我们将逐步指导您使用animateTransform使用SVG（可缩放矢量图形）生成内联动画的基础知识。

如果您是SVG的新手，我建议您查看可伸缩矢量图形（SVG）入门，以快速入门 。

您将要学习的技术将允许您创建复杂的图标和图像动画，而无需单个GIF，JPEG或PNG，JavaScript零且没有最微弱的Flash细语。

您创建的动画将是易于编辑的，因为它们是纯代码，并且在查看结果时仅占用了几KB的宝贵带宽。

在我们开始之前

要为SVG形状制作动画，首先需要具有创建形状的能力。 我发现创建SVG的最简单方法是使用Bohemian Coding中的Sketch 。 如果您不拥有Sketch，则可以免费使用30天的试用版，以达到本教程的目的。

我们将处理SVG代码，因此在Sketch中绘制形状后，请在其周围创建一个切片并将该切片导出为SVG文件。

然后，您将能够在代码编辑器（例如Sublime Text）中打开导出的文件，并从内部复制SVG代码。 您需要的只是从开始<svg>标记到结束</svg>标记的代码。

例如，Sketch为上图所示的蓝色矩形生成以下SVG代码：

<svg width="100px" height="125px" viewBox="0 0 100 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.1 (8751) - http://www.bohemiancoding.com/sketch -->
    <title>Slice 2</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125"></rect>
    </g>
</svg>

为了使代码在视觉上更易于使用，我们将对代码进行一些小的更改。

将svg元素的width和height为100%然后删除viewBox设置。 还要删除Generator注释以及title ， desc ， defs和g元素。

您应该以如下形式结束：

<svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
  <rect id="Rectangle-1" fill="#3C81C1" sketch:type="MSShapeGroup" x="0" y="0" width="100" height="125"></rect>
</svg>

将该代码放入HTML文档中，然后在浏览器中查看时，您应该在页面上看到与在Sketch中看到的相同的蓝色矩形：

注意：上图在背景中包括X和Y轴，因为您需要了解它们才能创建动画。 您很快就会了解原因。

“ animateTransform”做什么？

简短的答案是， animateTransform元素通过在要应用SVG的形状上设置变换属性来生成动画。

鉴于此，逻辑上的下一个问题是：

好的，那么“转换”会做什么？

将transform设置添加到形状后，您可以修改该形状在2D空间中的显示方式。 您可以执行五种不同类型的转换：

1. translate
   
2. scale