写 SVG 动画必看！SVG系列文章2-常见标签

1、坐标定位

关于一切元素，SVG 运用的坐标体系或许说网格体系，和 Canvas 用的差不多（一切计算机绘图都差不多）。这种坐标体系是：以页面的左上角为 (0,0) 坐标点，坐标以像素为单位，x 轴正方向是向右，y 轴正方向是向下。

<svg width="200" height="200" viewBox="0 0 100 100">…</svg>

• 界说的画布尺度是 200*200px

• viewBox 代表画布上能够显现的区域：从 (0,0) 点开端，100 宽 100 高的区域。这个 100、100 的区域，会放到 200*200 的画布上显现。于是就形成了扩大两倍的作用。

  假如设置成 100 100 100 100 代表做左上角初始点为 100-100，并且让 100*100 显现到 200*200 的画布上，默认就扩大两倍

2、基本形状

2.1 rect 矩形

<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

rx、ry 表明圆角的半径，默认为 0

2.2 circle 圆形

<circle cx="25" cy="75" r="20"/>

cx、cy 代表圆心的 x、y 方位，r 代表半径

2.3 Line 线条

<line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/>

x1、y1 代表起点 x、y 的方位；x2、y2 代表结尾 x、y 的方位；stroke 和 stroke-width 别离代表边框颜色和宽度

2.4 Polyline 折线

<polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/>

points：点集数列。每个数字用空白、逗号、终止指令符或许换行符分离隔。每个点有必要包括 2 个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 (0,0), (1,1) 和 (2,2) 能够写成这样：“0 0, 1 1, 2 2”。

2.5 polygon 多边形

<polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/>

points：点集数列。每个数字用空白符、逗号、终止指令或许换行符分离隔。每个点有必要包括 2 个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 (0,0), (1,1) 和 (2,2) 能够写成这样：“0 0, 1 1, 2 2”。途径制造完后闭合图形，所以最终的直线将从方位 (2,2) 衔接到方位 (0,0)。

2.6 path 途径

你能够用 path 元素制造矩形（直角矩形或许圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2 次曲线等曲线。因为 path 很强大也很杂乱，请阅读 Paths 章节以了解更多信息

<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>

d：一个点集数列以及其他关于怎么制造途径的信息

3、填充和边框

能够运用几种办法来着色（包括指定目标的特点）运用内联 CSS 款式、内嵌 CSS 款式，或许运用外部 CSS 款式文件。大多数的 web 网站的 SVG 运用的是内联款式 CSS，关于这些办法都有优缺点。

3.1 Fill 和 Stroke 特点

 <rect x="10" y="10" width="100" height="100"
       stroke="blue" stroke-width="20" stroke-linecap="butt" stroke-opacity="0.8"
       fill="purple" fill-opacity="0.5" />

• fill：设置目标内部的颜色

• stroke：设置制造目标的线条的颜色

• stroke-width：界说了描边的宽度

• stroke-linecap：控制边框结尾的形状

  • butt 用直边完毕线段，它是常规做法，线段鸿沟 90 度笔直于描边的方向、贯穿它的结尾。
  • square 的作用差不多，可是会略微超出 实际途径 的规模，超出的大小由 stroke-width 控制。
  • round 表明边框的结尾是圆角，圆角的半径也是由 stroke-width 控制的。

  <?xml version="1.0" standalone="no"?>
  <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
    <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
    <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
  </svg>
  

• xxx-opacity：控制透明度

• stroke-linejoin：用来控制两条描边线段之间，用什么方式衔接

  <?xml version="1.0" standalone="no"?>
  <svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
        stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>
    <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
        stroke-linecap="round" fill="none" stroke-linejoin="round"/>
    <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
        stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
  </svg>
  

• stroke-dasharray：将虚线类型应用在描边上

  <?xml version="1.0" standalone="no"?>
  <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
      stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
    <path d="M 10 75 L 190 75" stroke="red"
      stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
  </svg>
  

stroke-dasharray特点的参数，是一组用逗号切割的数字组成的数列。留意，和path不一样，这里的数字有必要用逗号切割（空格会被忽略）。每一组数字，第一个用来表明填色区域的长度，第二个用来表明非填色区域的长度。所以在上面的例子里，第二个途径会先做 5 个像素单位的填色，紧接着是 5 个空白单位，然后又是 5 个单位的填色。假如你想要更杂乱的虚线形式，你能够界说更多的数字。第一个例子指定了 3 个数字，这种情况下，数字会循环两次，形成一个偶数的虚线形式（奇数个循环两次变偶数个）。所以该途径首要烘托 5 个填色单位，10 个空白单位，5 个填色单位，然后回头以这 3 个数字做一次循环，可是这次是创立 5 个空白单位，10 个填色单位，5 个空白单位。通过这两次循环得到偶数形式，并将这个偶数形式不断重复。

其他还有一些关于填充和边框的特点，包括 fill-rule，用于界说怎么给图形堆叠的区域上色；stroke-miterlimit，界说什么情况下制造或不制造边框衔接的 miter 作用；还有 stroke-dashoffset，界说虚线开端的方位。

3.2 运用 CSS

• CSS 能够利用 style 特点刺进到元素的行间：

   <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>
  

• 或许，它能够被移到你所包括的一个特殊的款式部分。不过，我们不会像 HTML 那样把这样的部分塞进 <head> 部分，而是把它包括在一个叫做 defs 的区域。

  defs 表明界说，这里面能够界说一些不会在 SVG 图形中出现、可是能够被其他元素运用的元素：

  <?xml version="1.0" standalone="no"?>
  <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <style><![CDATA[
         #MyRect {
           stroke: black;
           fill: red;
         }
      ]]></style>
    </defs>
    <rect x="10" height="180" y="10" width="180" id="MyRect"/>
  </svg>
  

  一些能够在 HTML 里运用的 CSS，在 svg 里可能无法正常作业，比方 before 和 after 伪类

• 你也能够界说一个外部的款式表引入运用：

  <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect height="10" width="10" id="MyRect"/>
  </svg>
  

  /* css */
  #MyRect {
    fill: red;
    stroke: black;
  }
  

4、突变

4.1 线性突变

线性突变沿着直线改变颜色，要刺进一个线性突变，你需求在 SVG 文件的 defs 元素 内部，创立一个linearGradient 节点：

<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="Gradient1">
        <stop class="stop1" offset="0%"/>
        <stop class="stop2" offset="50%"/>
        <stop class="stop3" offset="100%"/>
      </linearGradient>
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="50%" stop-color="black" stop-opacity="0"/>
        <stop offset="100%" stop-color="blue"/>
      </linearGradient>
      <style type="text/css">
        #rect1 { fill: url(#Gradient1); }
        .stop1 { stop-color: red; }
        .stop2 { stop-color: black; stop-opacity: 0; }
        .stop3 { stop-color: blue; }
      </style>
  </defs>
  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
</svg>

你也能够指定特点 stop-opacity 来设置某个方位的半透明度（同样，关于 FF3 你也能够设置 rgba 值）：

 <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>

x1、x2、y1 和 y2，这些特点界说了突变路线走向：

 <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">

4.2 径向突变

径向突变与线性突变类似，仅仅它是从一个点开端发散制造突变。创立径向突变需求在文档的defs中增加一个 radialGradient 元素：

<?xml version="1.0" standalone="no"?>
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <radialGradient id="RadialGradient1">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
      <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
        <stop offset="0%" stop-color="red"/>
        <stop offset="100%" stop-color="blue"/>
      </radialGradient>
  </defs>
  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>
  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>
</svg>

5、文本

5.1 根底运用

<text x="10" y="10">Hello World!</text>

下列每个特点能够被设置为一个 SVG 特点或许成为一个 CSS 声明：font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing 和 text-decoration。

5.2 tspan 元素

该元素用来标记大块文本的子部分，它有必要是一个 text 元素或其他 tspan 元素的子元素。一个典型的用法是把句子中的一个词变成粗体红色：

<text>
  <tspan font-weight="bold" fill="red">This is bold and red</tspan>
</text>

tspan 元素有以下的自界说特点：

• x：为容器设置一个新绝对x坐标。它覆盖了默认的当时的文本方位。这个特点能够包括一个数列，它们将一个一个地应用到tspan元素内的每一个字符上。
• dx：从当时方位，用一个水平偏移开端制造文本。这里，你能够供给一个值数列，能够应用到连续的字体，因此每次累积一个偏移。此外还有特点 y 和特点 dy 作笔直转换。
• rotate：把一切的字符旋转一个视点。假如是一个数列，则使每个字符旋转别离旋转到那个值，剩下的字符依据最终一个值旋转。
• textLength：这是一个很模糊的特点，给出字符串的计算长度。它意味着假如它自己的度量文字和长度不满足这个供给的值，则答应烘托引擎精密调整字型的方位。

5.3 textPath 元素

<path id="my_path" d="M 20,20 C 40,40 80,40 100,20" fill="transparent" />
<text>
    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">
        This text follows a curve.
    </textPath>
</text>

该元素利用它的 xlink:href 特点取得一个任意途径，把字符对齐到途径，于是字领会盘绕途径、顺着途径走：

6、image 元素

SVG 的 image 元素答应在一个 SVG 目标内部出现光栅图画：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image href="firefox.jpg" x="0" y="0" height="50px" width="50px"  preserveAspectRatio="none meet"/>
</svg>

• 假如你没有设置 x 特点或 y 特点，它们自动被设置为 0。
• 假如你没有设置 height 特点或 width 特点，它们自动被设置为 0。
• 假如 width 特点或 height 等于 0，将不会出现这个图画。
• 留意：图片宽高比默认锁定，假如需求修改，需求增加 preserveAspectRatio 特点进行设置

preserveAspectRatio：表明是否强制进行一致缩放，能够设置两个参数的列表

• align：特点值表明是否强制一致缩放，当 SVG 的 viewbox 特点与视图特点宽高比不一致时运用，可选特点检查官方文档

  • none ：不会进行强制一致缩放，假如需求，会缩放指定元素的图形内容，使元素的鸿沟彻底匹配视图矩形。

    （留意：假如 <align> 的值是 none ，则 <meetOrSlice> 特点的值将会被忽略。）

  • xMinYMin、xMidYMin、xMaxYMin 、xMinYMid 、xMidYMid 、xMaxYMid 、xMinYMax 、xMidYMax 、xMaxYMax

• meetOrSlice

  • meet (默认值) ：假如图形的宽高比和视图窗口不匹配，则某些视图将会超出 viewbox 规模（即 SVG 的 viewbox 视图将会比可视窗口小）
  • slice：假如 SVG 的 viewbox 宽高比与可视区域不匹配，则 viewbox 的某些区域将会延伸到视图窗口外部（即 SVG 的 viewbox 将会比可视窗口大）

7、其余标签

7.1 g 元素

便利控制整组的元素进行款式设置或许动画设置，相当于一个容器：

    <svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);background-size: 100%,100%;background-repeat: no-repeat;" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
            <g opacity="0">
                文字代码（略）
            </g>
            <g style="transform: translate(140px, 580px);">
                爆仗矢量代码（略）
            </g>
            <g style="transform: translate(120px, 560px);opacity: 0;">
                希望牌矢量代码（略）
            </g>
    </svg> 

7.2 svg

在 svg 标签中是答应嵌入 svg 标签的，便利做屡次动画打开：

留意：当 svg 嵌套 svg 时，内置的 svg 设置宽高或许背景图无法生效，宽高由内置内容决定

       <svg width="300" height="180" x="0" y="1806">
            <g>
                <g>
                    <image href="./imgs/二次滚动长图.jpg" x="0" y="1029" width="300" preserveAspectRatio="none meet">
                        <animate attributeName="y" from="1029" to="-100%" begin="0s" dur="200s"
                            repeatCount="indefinite" />
                    </image>
                    <image href="./imgs/动效粒子.gif" x="0" y="1029" width="300" preserveAspectRatio="none meet" />
                </g>
                <image href="./imgs/二次打开1图.png" x="0" y="180" width="300" preserveAspectRatio="none meet" />
                <image href="./imgs/二次打开标题.gif" x="0" y="931" width="300" preserveAspectRatio="none meet" />
                <image href="./imgs/结尾图片.png" x="0" y="1329" width="300" preserveAspectRatio="none meet" />
            </g>
           <!-- 点击触发动画 -->
            <animate attributeName="height" from="180" to="1653" dur="3s" begin="click" repeatCount="1" fill="freeze"
                restart="never" />
            <rect x="0" y="0" width="300" height="180" fill="#fff" />
            <image href="./imgs/向下滑动.png" x="0" y="0" width="300" preserveAspectRatio="none meet" />
        </svg>

共四章，有需求可催更，网上制造 svg 动画的资源比较少，本章参阅：官方文档入门