数据可视化 SVG （二）

1 渐变和滤镜

2 SVG 形变

3 路径描边动画

4 SMIL 动画

5 第三方动画库

6 SVG 动画案例

一、渐变色和滤镜效果：

1、css实现毛玻璃效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      margin: 0;
      padding: 0;
    }
    .box{
      position: relative;
      width: 200px;
      height: 200px;
    }

    .bg-cover{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;

      /* 做毛玻璃效果 */
      background-color: transparent;
      backdrop-filter: blur(8px);
    }
  </style>
</head>
<body>
  

  <div class="box">
    <img src="../images/avatar.jpeg" alt="">
    <div class="bg-cover"></div>
  </div>
</body>
</html>

2、渐变色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <!-- 定义可以复用的元素: 样式, 渐变, 图形, 滤镜... -->
    <defs>
      <!-- 默认的渐变色 -->
      <linearGradient id="gradient1">
        <stop offset="0%" stop-color="red"></stop>
        <stop offset="50%" stop-color="green"></stop>
        <stop offset="100%" stop-color="blue"></stop>
      </linearGradient>

      <!-- 这个是制定渐变的方向  相当于（0,0）到（1,1）-->
      <linearGradient id="gradient2" x1="0" y1="0" x2="1" y2="1"  >
        <stop offset="0%" stop-color="red"></stop>
        <stop offset="50%" stop-color="green"></stop>
        <stop offset="100%" stop-color="blue"></stop>
      </linearGradient>

      <!-- 通过形变 渐变色(了解 ) -->
      <linearGradient id="gradient3" gradientTransform="rotate(0)">
        <stop offset="0%" stop-color="red"></stop>
        <stop offset="50%" stop-color="green"></stop>
        <stop offset="100%" stop-color="blue"></stop>
      </linearGradient>

    </defs>

    <rect x="0" y="0" width="100" height="50" fill="url(#gradient3)"></rect>
    
  </svg>

</body>
</html>

3、css实现的毛玻璃效果 filter

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      margin: 0;
      padding: 0;
    }
    .box{
      position: relative;
      width: 200px;
      height: 200px;
      /* 超出去的模糊效果 隐藏掉 */
      overflow: hidden;
    }

    img{
      /* 毛玻璃效果 */
      filter: blur(8px);
    }
  </style>
</head>
<body>

  <div class="box">
    <img src="../images/avatar.jpeg" alt="">
  </div>
</body>
</html>

4、svg的滤镜效果-模糊效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      /* background-image: url(../images/grid.png); */
    }
    svg{
      /* background-color: rgba(255, 0, 0, 0.1); */
    }
  </style>

</head>
<body>

  <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" >
    <defs>
      <!-- 高斯模糊的 效果 -->
      <filter id="blurFilter">
        <!--  ......  -->
        <feGaussianBlur stdDeviation="8"></feGaussianBlur>
      </filter>
    </defs>
    <image 
      href="../images/avatar.jpeg"
      width="200"
      height="200"
      filter="url(#blurFilter)"
    >
    </image>
  </svg>

</body>
</html>

5、svg的滤镜效果-模糊效果-区域

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      /* background-image: url(../images/grid.png); */
    }
    svg{
      /* background-color: rgba(255, 0, 0, 0.1); */
    }
  </style>

</head>
<body>

  <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" >
    <defs>
      <!-- 高斯模糊的 效果 -->
      <filter id="blurFilter" x="50%" y="50%" width="50%" height="25%">
        <feGaussianBlur stdDeviation="8"></feGaussianBlur>
      </filter>
      
    </defs>
    <image 
      href="../images/avatar.jpeg"
      width="200"
      height="200"
      filter="url(#blurFilter)"
    >
    </image>
  </svg>

</body>
</html>

二、svg的形变

1、平移 transform="translate(x, y)" 属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <!-- 1.平移一个元素 -->
    <!-- <rect x="0" y="0" width="100" height="50"
      transform="translate(200, 200)"
    >
    </rect> -->

    <!-- 2.平移一个元素, 在元素的内部会创建一个新的坐标系统 -->
    <!-- <rect 
      transform="translate(100, 100)"
      x="-10" y="-10" width="100" height="50"
    >
    </rect> -->

    <!-- 2.平移一个元素, 在元素的内部会创建一个新的坐标系统 -->
    <g transform="translate(100, 100)">
      <rect 
        x="10" y="10" width="100" height="50"
      >
      </rect>
    </g>

  </svg>

</body>
</html>

2、旋转-rotatae transform="rotate(45, 50, 25) translate(100, 0)" 属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <!-- 1.旋转一个元素 -->
    <!-- <rect 
      transform="rotate(45, 50, 25) translate(100, 0)"
      x="0" y="0" width="100" height="50"
    >
    </rect> -->

    <rect 
      transform="translate(100, 0) rotate(45, 50, 25)"
      x="0" y="0" width="100" height="50"
    >
    </rect>

    
  </svg>

</body>
</html>

3、缩放-scale transform="scale(2)" 属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <!-- 1.缩放一个元素 -->
    <!-- <rect 
      transform="translate(100, 100) scale(1, 2)"
      x="0" y="0" width="100" height="50"
    >
    </rect> -->

    <!-- 2.修改缩放的原点 -->
    <!-- <rect 
      transform="translate(100, 100) scale(2)"
      x="-25" y="-25" width="50" height="50"
    >
    </rect> -->
    
     <!-- 3.修改缩放的原点 -->
     <g  transform="scale(2)">
        <rect
          transform="translate(10, 0)"
          x="0" y="0" width="50" height="50"
        >
        </rect>
     </g>

    
  </svg>

</body>
</html>

三、svg描边动画

1、stroke描边动画效果1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }
    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }

    #line1{
      /* 指定为虚线 */
      stroke-dasharray: 100px;
      /* 可见 */
      stroke-dashoffset: 0px;
      animation: line1Move 2s linear;
    }

    @keyframes line1Move{
      0%{
        /* 不可见 */
        stroke-dashoffset: 100px;
      }

      100%{
        /* 可见 */
        stroke-dashoffset: 0px;
      }
    }

  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    
    <!-- 
      stroke , 而不是 fill
     -->
    <line 
      id="line1"
      x1="100" y1="70"  x2="200" y2="70" 
      stroke="red" 
      stroke-width="10"
    >
    </line>


  </svg>

</body>
</html>

2、stroke描边动画效果2 1的简写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }
    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }

    #line1{
      /* 指定为虚线 */
      stroke-dasharray: 100px;
      /* 不可见 */
      stroke-dashoffset: 100px;
      animation: line1Move 2s linear forwards;
    }
    @keyframes line1Move{
      100%{
        stroke-dashoffset: 0px;  /* 可见 */
      }
    }

  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    
    <!-- 
      stroke , 而不是 fill
     -->
    <line 
      id="line1"
      x1="100" y1="70"  x2="200" y2="70" 
      stroke="red" 
      stroke-width="10"
    >
    </line>


  </svg>

</body>
</html>

3、stroke描边动画效果3 动画演出速度比前面快

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }
    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }

    #line1{
      /* 指定为虚线  100px */
      stroke-dasharray: 500px;
      /* 不可见 */
      stroke-dashoffset: 500px;
      animation: line1Move 2s linear forwards;
    }
    @keyframes line1Move{
      100%{
        stroke-dashoffset: 0px;  /* 可见 */
      }
    }

  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    
    <!-- 
      stroke , 而不是 fill
     -->
    <line 
      id="line1"
      x1="100" y1="70"  x2="200" y2="70" 
      stroke="red" 
      stroke-width="10"
    >
    </line>


  </svg>

</body>
</html>

4、stroke描边动画效果4 就算是曲线也一样可以做到按曲线方向移动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }
    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }

    #line1{
      /* 将线段设置为虚线 */
      stroke-dasharray:130px;
      /* 偏移 不可见 */
      stroke-dashoffset: 130px;
      animation:  line1Move 3s linear forwards;
    }

    @keyframes line1Move{
      100%{
        stroke-dashoffset: 0px;  /* 可见 */
      }
    }


  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    
    <!-- 
      stroke , 而不是 fill
     -->
    <path
     id="line1"
     d="M 100 70, L 200 70, L 200 100"
     stroke="red"
     stroke-width="10"
     fill="transparent"
    >
    </path>


  </svg>

</body>
</html>

5、雪糕动画案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 0,  1.75 800,  2.5 200 -->
    <style>
      .inside-r,
      .inside-l,
      .drop,
      .stick,
      .outline{
        animation: lineMove 2s linear forwards;
      }
      .outline{
        /* 虚线  1019 */
        stroke-dasharray: 1020px;
        /* 不可见 */
        stroke-dashoffset: 1020px;
        
      }

      .stick{
        /* 这里本来是给 252px就行了,但是我们给800, 想加速 */
        stroke-dasharray: 800px;
        /* 不可见 */
        stroke-dashoffset: 800px;
        /* animation: lineMove 2s linear forwards; */
        animation-delay: 1.75s;
      }

      .drop{
        stroke-dasharray: 200px;
        stroke-dashoffset: 200px;
        /* animation: lineMove 2s linear forwards; */
        animation-delay: 2.5s;
      }

      .inside-l{
        stroke-dasharray: 800px;
        stroke-dashoffset: 800px;
        /* animation: lineMove 2s linear forwards; */
        animation-delay: 1s;
      }

      
      .inside-r{
        stroke-dasharray: 700px;
        stroke-dashoffset: 700px;
        /* animation: lineMove 2s linear forwards; */
      }

      @keyframes lineMove{
        100%{
          /* 可见 */
          stroke-dashoffset: 0px;
        }
      }
    </style>
  </head>
  <body>
    <svg
      id="popsicle"
      width="300"
      height="400"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 177.3 449.1"
    >
      <g stroke="black" stroke-width="5px">
        <!-- 手柄 -->
        <path
          class="stick"
          d="M408.8,395.9V502.4a18.8,18.8,0,0,1-18.8,18.8h0a18.8,18.8,0,0,1-18.8-18.8V415.3"
          transform="translate(-301.2 -73.5)"
          fill="none"
        />
        <!-- 水滴 -->
        <path
          class="drop"
          d="M359.1,453.5c0,3.1-2.1,5.6-4.7,5.6s-4.7-2.5-4.7-5.6,2.1-8.3,4.7-8.3S359.1,450.4,359.1,453.5Z"
          transform="translate(-301.2 -73.5)"
          fill="none"
        />
        <!-- 外层 -->
        <path
          class="outline"
          d="M389.9,75h0a87.4,87.4,0,0,0-87.2,87.2v218a15.7,15.7,0,0,0,15.7,15.7h12a4.3,4.3,0,0,1,4.1,4.8h0.1v17c0,8.2,9.1,7.9,9.1,0v-6c0-5.2,5.8-5.2,5.8,0v20.5c0,7.7,9.8,7.7,9.8,0V407.2c0-5.2,6.4-5.2,6.4,0v2.7c0,7.7,8.8,7.7,8.8,0v-6c0-6.4,3.9-7.8,6-8.1h80.9a15.7,15.7,0,0,0,15.7-15.7v-218A87.4,87.4,0,0,0,389.9,75Z"
          transform="translate(-301.2 -73.5)"
          fill="none"
        />

        <!-- 里面左边 -->
        <path
          class="inside-l"
          d="M55.5,68h0A20.2,20.2,0,0,1,75.7,88.2V276.9a4.5,4.5,0,0,1-4.5,4.5H39.8a4.5,4.5,0,0,1-4.5-4.5V88.2A20.2,20.2,0,0,1,55.5,68Z"
          fill="none"
        />
        <!-- 里面左边 -->
        <path
          class="inside-r"
          d="M121.8,68h0A20.2,20.2,0,0,1,142,88.2V277a4.4,4.4,0,0,1-4.4,4.4H106.1a4.4,4.4,0,0,1-4.4-4.4V88.2A20.2,20.2,0,0,1,121.8,68Z"
          fill="none"
        />
      </g>
    </svg>

    <script>
      window.onload = function () {
        getPathLength("stick"); // 252px
        getPathLength("drop"); // 36
        getPathLength("outline"); // 1019
        getPathLength("inside-l"); // 486
        getPathLength("inside-r"); // 486
      };

      function getPathLength(className) {
        let stickEl = document.getElementsByClassName(className)[0];
        let stickLength = stickEl.getTotalLength();
        console.log(className + "Length=", stickLength);
      }
    </script>
  </body>
</html>

四、svg的SMIL动画以下的元素标签都是放到图形标签里面的，各自也有属性来调整动画

1、set元素-动画 set不足之处是没有过度动画，是跳变的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <rect x="0" y="0" width="100" height="50" fill="red">
       <set
         attributeName ='x'
         to="200"
         begin="3s"
       >
       </set> 
    </rect>
  </svg>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <rect id="rectangle" x="0" y="0" width="100" height="50" fill="green">
       <set
         attributeName ='x'
         to="200"
         begin="rectangle.click"
       >
       </set> 
    </rect>
  </svg>

</body>
</html>

2、animiate元素 -动画

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" >
    <rect x="0" y="0" width="100" height="50" fill="red">
      <!-- 
        1.animate 元素的基本使用
       -->
      <!-- <animate
        attributeName="x"
        form="0"
        to="200"
        dur="3s"
        begin="2s"
        fill="freeze"
      > -->
      <!-- 
        2.animate 元素的基本使用(3个属性时必须的)
       -->
      <animate
        attributeName="x"
        to="200"
        dur="3s"
      >

      </animate>
    </rect>
  </svg>


  
  <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" >
    <rect x="0" y="0" width="100" height="50" fill="green">
      <!-- 
        form: 0
        to: 200
       -->
      <animate
        attributeName="x"
        values="0; 170; 200"
        dur="3s"
        repeatCount="indefinite"
      >
      </animate>

      <animate
        attributeName="fill"
        values="red;green"
        dur="3s"
        repeatCount="indefinite"
      >
      </animate>
    </rect>

  </svg>


  <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" >
    <rect x="0" y="0" width="100" height="50" fill="pink">
      <animate
        id="oneAnimate"
        attributeName="x"
        values="0;200"
        dur="3s"
        fill="freeze"
      >
      </animate>

      <animate
        attributeName="y"
        values="0;100"
        dur="3s"
        fill="freeze"
        begin="oneAnimate.end"
      >
      </animate>
    </rect>
  </svg>


</body>
</html>

3、animateTransform--translate 平移的动画

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" >
    <rect x="0" y="0" width="100" height="50" fill="red">
      <animateTransform
        attributeName="transform"
        type="translate"
        from="0, 0"
        to="200, 0"
        dur="2s"
        begin="1s"
        repeatCount="indefinite"
      >
      </animateTransform>
    </rect>
  </svg>

  <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" >
    <rect x="0" y="0" width="100" height="50" fill="red">
      <animateTransform
        attributeName="transform"
        type="translate"
        values="0 0;200 0"
        dur="2s"
        begin="1s"
        repeatCount="indefinite"
      >
      </animateTransform>
    </rect>
  </svg>


</body>
</html>

4、animateTransform-rotate 旋转旋转的中心以from和to的第2、3参数定义。也可以使用value简写的方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <rect x="0" y="0" width="50" height="50" fill="red">
      <animateTransform
        attributeName="transform"
        type="rotate"
        from="0 150 150"
        to="360 150 150"
        dur="20s"
        begin="1s"
        repeatCount="indefinite"
      >
      </animateTransform>
    </rect>
  </svg>

  <!-- <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" >
    <rect x="0" y="0" width="100" height="50" fill="red">
      <animateTransform
        attributeName="transform"
        type="rotate"
        values="0 50 25;-360 50 25"
        dur="2s"
        begin="1s"
        repeatCount="indefinite"
      >
      </animateTransform>
    </rect>
  </svg> -->



</body>
</html>

5、animateTransform-scale 缩放的动画 2个参数分别对应xy轴

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" >
    <rect x="0" y="0" width="100" height="50" fill="red">
      <animateTransform
        attributeName="transform"
        type="scale"
        from="1 1"
        to="1 3"
        dur="2s"
        begin="1s"
        repeatCount="indefinite"
      >
      </animateTransform>
    </rect>
  </svg>

  <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" >
    <rect x="0" y="0" width="100" height="50" fill="red">
      <animateTransform
        attributeName="transform"
        type="scale"
        values="1;0.5"
        dur="2s"
        begin="1s"
        repeatCount="indefinite"
      >
      </animateTransform>
    </rect>
  </svg>



</body>
</html>

6、animateMotion动画此标签的rotate可以自动控制图形的方向，path控制路径

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    
    <!-- 画一条路径 -->
    <path d="M 0 100, L 100 30, L 200 100, L 300 30" fill="transparent" stroke="red"></path>

    <!-- 
      repeatCount="indefinite"
     -->
    <rect x="0" y="0" width="20" height="10" rx="4" ry="4" fill="red">
      <animateMotion
       path="M 0 100, L 100 30, L 200 100, L 300 30"
       dur="5s"
       rotate="auto"
      >
      </animateMotion>
    </rect>


  </svg>

</body>
</html>

7、animateMotion动画-复用路径在animateMotion标签里面使用mpath标签来设置路线

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    
    <!-- 画一条路径 -->
    <path id="linePath" d="M 0 100, L 100 30, L 200 100, L 300 30" fill="transparent" stroke="red"></path>

    <!-- 
      repeatCount="indefinite"
     -->
    <rect x="0" y="0" width="20" height="10" rx="4" ry="4" fill="red">
      <animateMotion
       dur="5s"
       rotate="auto"
      >
      <mpath href="#linePath"></mpath>
      </animateMotion>
    </rect>


  </svg>

</body>
</html>

8、animateMotion动画-优化通过给小长方形设置xy为负的一半长宽可以做到图形中心在直线上运动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    
    <!-- 1.图形 -->
    <path id="linePath" d="M 0 100, L 100 30, L 200 100, L 300 30" fill="transparent" stroke="red"></path>
    <rect id="rectangle" x="-10" y="-5" width="20" height="10" rx="4" ry="4" fill="red"></rect>


    <!-- 2.动画 -->
    <animateMotion
      href="#rectangle"
      dur="5s"
      rotate="auto"
      fill="freeze"
    >
      <mpath href="#linePath"></mpath>
    </animateMotion>
  </svg>

</body>
</html>

五、svg动画案例

1、飞机飞行轨迹

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg width="400" height="200" viewBox="0 0 3387 1270">
      <defs>
        <style>
          svg {
            background-color: #28505d;
          }
          /**飞机飞行路线**/
          .planePath {
            stroke: #d9dada;
            stroke-width: 0.5%;
            stroke-dasharray: 1% 2%;
            stroke-linecap: round;
            fill: none;
          }
          /**飞机颜色**/
          .fil1 {
            fill: #d9dada;
          }
          .fil2 {
            fill: #c5c6c6;
          }
          .fil4 {
            fill: #9d9e9e;
          }
          .fil3 {
            fill: #aeafb0;
          }
        </style>
      </defs>

      <!-- 飞行路径 -->
      <path
        id="planePath"
        class="planePath"
        d="M-226 626c439,4 636,-213 934,-225 755,-31 602,769 1334,658 562,-86 668,-698 266,-908 -401,-210 -893,189 -632,630 260,441 747,121 1051,91 360,-36 889,179 889,179"
      />

      <!-- 飞机图形-->
      <g id="plane">
        <polygon
          class="fil1"
          points="-141,-10 199,0 -198,-72 -188,-61 -171,-57 -184,-57 "
        />
        <polygon class="fil2" points="199,0 -141,-10 -163,63 -123,9 " />
        <polygon
          class="fil3"
          points="-95,39 -113,32 -123,9 -163,63 -105,53 -108,45 -87,48 -90,45 -103,41 -94,41 "
        />
        <path
          class="fil4"
          d="M-87 48l-21 -3 3 8 19 -4 -1 -1zm-26 -16l18 7 -2 -1 32 -7 -29 1 11 -4 -24 -1 -16 -18 10 23zm10 9l13 4 -4 -4 -9 0z"
        />
        <polygon
          class="fil1"
          points="-83,28 -94,32 -65,31 -97,38 -86,49 -67,70 199,0 -123,9 -107,27 "
        />
      </g>



      <!-- 动画效果 -->
      <animateMotion
        href="#plane"
        dur="6s"
        rotate="auto"
        repeatCount="indefinite"
      >
        <mpath href="#planePath"></mpath>
      </animateMotion>
    </svg>
  </body>
</html>

2、进度条加载动画

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #e74c3c;
      }
      svg {
        margin: 40px;
      }
    </style>
  </head>
  <body>
    <!-- 1)音乐播放动画-->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="80"
      height="100"
      viewBox="0 0 80 100"
    >
      <!-- line 1 -->
      <rect
        fill="#fff"
        width="3"
        height="100"
        transform="rotate(180,3,50)"
      >
        <animate
          attributeName="height"
          values="30; 100; 30"
          dur="1s"
          repeatCount="indefinite"
          begin="0s"
        >
        </animate>
      </rect>
      <!-- line2 -->
      <rect
        x="17"
        fill="#fff"
        width="3"
        height="100"
        transform="rotate(180 20 50)"
      >
        <animate
          attributeName="height"
          values="30; 100; 30"
          dur="1s"
          repeatCount="indefinite"
          begin="0.1s"
        >
        </animate>
      </rect>
      <!-- line3 -->
      <rect
        x="40"
        fill="#fff"
        width="3"
        height="100"
        transform="rotate(180,40,50)"
      >
      <animate
        attributeName="height"
        values="30; 100; 30"
        dur="1s"
        repeatCount="indefinite"
        begin="0.3s"
      >
      </animate>

      </rect>
      <!-- line4 -->
      <rect
        x="60"
        fill="#fff"
        width="3"
        height="100"
        transform="rotate(180 58 50)"
      >
        <animate
          attributeName="height"
          values="30; 100; 30"
          dur="1s"
          repeatCount="indefinite"
          begin="0.5s"
        >
        </animate>
      </rect>
      <!-- line4 -->
      <rect
        x="80"
        fill="#fff"
        width="3"
        height="100"
        transform="translate(0) rotate(180 76 50)"
      >
        <animate
          attributeName="height"
          values="30; 100; 30"
          dur="1s"
          repeatCount="indefinite"
          begin="0.1s"
        >
        </animate>
      </rect>
    </svg>

    <!-- 2.进度条动画 -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="100"
      height="100"
      viewBox="0 0 100 100"
    >
      <circle fill="#fff" stroke="none" cx="6" cy="50" r="6">
        <animate
         attributeName="opacity"
         values="0;1;0"
         dur="1s"
         begin="0s"
         repeatCount="indefinite"
        >
        </animate>
      </circle>
      <circle fill="#fff" stroke="none" cx="26" cy="50" r="6">
        <animate
          attributeName="opacity"
          values="0;1;0"
          dur="1s"
          begin="0.1s"
          repeatCount="indefinite"
        >
        </animate>
      </circle>
      <circle fill="#fff" stroke="none" cx="46" cy="50" r="6">
        <animate
          attributeName="opacity"
          values="0;1;0"
          dur="1s"
          begin="0.2s"
          repeatCount="indefinite"
        >
        </animate>
      </circle>
    </svg>

    <!-- 3.转动动画 -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="100"
      height="100"
      viewBox="0 0 100 100"
    >
      <!-- big circle -->
      <circle
        fill="none"
        stroke="#fff"
        stroke-width="6"
        stroke-miterlimit="15"
        stroke-dasharray="14.2472,14.2472"
        cx="50"
        cy="50"
        r="47"
      >
       <animateTransform
        attributeName="transform"
        type="rotate"
        values="0 50 50;360 50 50"
        dur="5s"
        repeatCount="indefinite"
       >
       </animateTransform>
      </circle>

      <!-- small circle -->
      <circle
        fill="none"
        stroke="#fff"
        stroke-width="1"
        stroke-miterlimit="10"
        stroke-dasharray="10,10"
        cx="50"
        cy="50"
        r="39"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 50 50;-360 50 50"
          dur="5s"
          repeatCount="indefinite"
        >
        </animateTransform>
      </circle>

      <!-- rect -->
      <g fill="#fff">
        <rect x="30" y="35" width="5" height="30">
          <animateTransform
           attributeName="transform"
           type="translate"
           values="0 -5; 0 5; 0 -5"
           dur="1s"
           begin="0s"
           repeatCount="indefinite"
          >
          </animateTransform>
        </rect>
        <rect x="40" y="35" width="5" height="30">
          <animateTransform
          attributeName="transform"
          type="translate"
          values="0 -5; 0 5; 0 -5"
          dur="1s"
          begin="0.1s"
          repeatCount="indefinite"
         >
         </animateTransform>
        </rect>
        <rect x="50" y="35" width="5" height="30">
          <animateTransform
          attributeName="transform"
          type="translate"
          values="0 -5; 0 5; 0 -5"
          dur="1s"
          begin="0.2s"
          repeatCount="indefinite"
         >
         </animateTransform>
        </rect>
        <rect x="60" y="35" width="5" height="30">
          <animateTransform
          attributeName="transform"
          type="translate"
          values="0 -5; 0 5; 0 -5"
          dur="1s"
          begin="0.3s"
          repeatCount="indefinite"
         >
         </animateTransform>
        </rect>
        <rect x="70" y="35" width="5" height="30">
          <animateTransform
          attributeName="transform"
          type="translate"
          values="0 -5; 0 5; 0 -5"
          dur="1s"
          begin="0.4s"
          repeatCount="indefinite"
         >
         </animateTransform>
        </rect>
      </g>
    </svg>
  </body>
</html>

3、定位动画+css3-temp

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .first-box {
        width: 600px;
        height: 314px;
        background: url(./images/bg-location.png);
        background-size: 100% 100%;
      }
      
      /* 定位的 icon */
      #loc1{
        animation: moveLoc1Icon1 1s linear infinite alternate;
      }
      #loc2{
        animation: moveLoc1Icon2 1s linear infinite alternate;
        animation-delay: 0.3s;
      }
      
      @keyframes moveLoc1Icon1{
        0%{
          transform: translateY(-20px);
        }
        100%{
          transform: translateY(0px);
        }
      }
      @keyframes moveLoc1Icon2{
        0%{
          transform: translateY(0px);
        }
        100%{
          transform: translateY(10px);
        }
      }

      
      #c1{
        animation: scaleEllipse1 2s linear infinite;
      }

      #c2{
        animation: scaleEllipse2 2s linear infinite;
        animation-delay: 1s;
      }

      #c3, #c4{
        animation: scaleEllipse3 2s linear infinite;
      }

      #c4{
        animation-delay: 1s;
      }


      @keyframes scaleEllipse1{
        0%{
          rx:0;
          ry:0;
          opacity: 1;
        }
        100%{
          rx:16;
          ry:8;
          opacity: 0;
        }
      }
      @keyframes scaleEllipse2{
        0%{
          rx:0;
          ry:0;
          opacity: 1;
        }
        100%{
          rx:12;
          ry:6;
          opacity: 0;
        }
      }
      @keyframes scaleEllipse3{
        0%{
          rx:0;
          ry:0;
          opacity: 1;
        }
        100%{
          rx:10;
          ry:5;
          opacity: 0;
        }
      }

    </style>
  </head>
  <body>
    <div class="box-left first-box">
      <svg
        id="location"
        height="400"
        version="1.1"
        width="744"
        xmlns="http://www.w3.org/2000/svg"
      >
        <desc>Created with Snap</desc>
        <defs>
          <linearGradient
            x1="100%"
            y1="40.7087699%"
            x2="4.9797314%"
            y2="60.8683027%"
            id="linearGradient-1"
          >
            <stop stop-color="#F5533D" stop-opacity="0" offset="0%"></stop>
            <stop stop-color="#F5533D" offset="44.5180532%"></stop>
            <stop stop-color="#F5533D" stop-opacity="0" offset="100%"></stop>
          </linearGradient>
        </defs>
        <image
          id="loc1"
          xlink:href="./images/redPoint.png"
          preserveAspectRatio="none"
          x="265"
          y="50.275"
          width="55"
          height="74"
        ></image>
        <image
          id="loc2"
          xlink:href="./images/smPoint.png"
          preserveAspectRatio="none"
          x="155"
          y="69.97776888888889"
          width="25"
          height="34"
        ></image>
        <image
          id="loc3"
          xlink:href="./images/smPoint.png"
          preserveAspectRatio="none"
          x="435"
          y="90.35983743115371"
          width="25"
          height="34"
        ></image>
        <image
          xlink:href=" ./images/bg-red.png"
          preserveAspectRatio="none"
          x="278"
          y="94"
          width="30"
          height="100"
        ></image>
        <image
          xlink:href=" ./images/bg-red.png"
          preserveAspectRatio="none"
          x="160"
          y="94"
          width="15"
          height="50"
        ></image>
        <image
          xlink:href="./images/first-smbg.png"
          preserveAspectRatio="none"
          x="438"
          y="125"
          width="20"
          height="20"
        ></image>
        <ellipse
          id="c1"
          cx="293"
          cy="187"
          rx="8.106666666666667"
          ry="3.546666666666667"
          fill="rgba(0,0,0,0)"
          stroke="#ff0000"
          style="opacity: 0.493333"
        ></ellipse>
        <ellipse
          id="c2"
          cx="293"
          cy="187"
          rx="0"
          ry="0"
          fill="rgba(0,0,0,0)"
          stroke="#ff0000"
          style="opacity: 1"
        ></ellipse>
        <ellipse
          id="c3"
          cx="168"
          cy="143"
          rx="0"
          ry="0"
          fill="rgba(0,0,0,0)"
          stroke="#ff0000"
          style="opacity: 1"
        ></ellipse>
        <ellipse
          id="c4"
          cx="168"
          cy="143"
          rx="6.08"
          ry="2.5333333333333337"
          fill="rgba(0,0,0,0)"
          stroke="#ff0000"
          style="opacity: 0.493333"
        ></ellipse>
      </svg>
    </div>
  </body>
</html>

4、水球体+css3+js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      *,
      *:before,
      *:after {
        box-sizing: border-box;
        outline: none;
      }
      body {
        background: #020438;
        font: 14px/1 "Open Sans", helvetica, sans-serif;
      }
      .box {
        height: 280px;
        width: 280px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #020438;
        border-radius: 100%;
        overflow: hidden;
      }
      .box .percent {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        width: 100%;
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        display: -webkit-flex;
        align-items: center;

        justify-content: center;
        color: #fff;
        font-size: 64px;
      }
      .box .water {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        transform: translate(0, 50%);
        background: #4d6de3;
      }
      .box .water_wave {
        width: 200%;
        position: absolute;
        bottom: 100%;
      }
      .box .water_wave_back {
        right: 0;
        fill: #c7eeff;
        animation: moveWaveBack 1.7s linear infinite;
      }
      .box .water_wave_front {
        left: 0;
        fill: #4d6de3;
        margin-bottom: -1px;
        animation: moveWaveFront 0.7s linear infinite;
      }
      @keyframes moveWaveBack{
        0%{
          transform: translateX(0);
        }
        100%{
          transform: translateX(50%);
        }
      }
      @keyframes moveWaveFront{
        0%{
          transform: translateX(0);
        }
        100%{
          transform: translateX(-50%);
        }
      }
    </style>
  </head>
  <body>
    <div class="water-ball">
      <svg
        version="1.1"
        xmlns="https://www.w3.org/2000/svg"
        xmlns:xlink="https://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        style="display: none"
      >
        <!-- 定义可复用的 icon -->
        <symbol id="wave">
          <path
            d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"
          ></path>
          <path
            d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"
          ></path>
          <path
            d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"
          ></path>
          <path
            d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"
          ></path>
        </symbol>
      </svg>
      <div class="box">
        <div class="percent">
          <div class="percentNum" id="count">0</div>
          <div class="percentB">%</div>
        </div>
        <div id="water" class="water">
          <svg viewBox="0 0 560 20" class="water_wave water_wave_back">
            <use xlink:href="#wave"></use>
          </svg>
          <svg viewBox="0 0 560 20" class="water_wave water_wave_front">
            <use xlink:href="#wave"></use>
          </svg>
        </div>
      </div>
    </div>

    <script>
      window.onload = function() {
        var countEL = document.getElementById('count')
        var waterEl = document.getElementById('water')
        var currentPercentage = 0;
        var targetPercentage = 70;

        var timeId = null
        timeId = setInterval(function(){
          
          currentPercentage++; // 170
          if(currentPercentage>= targetPercentage){
            clearInterval(timeId)
          }
          countEL.innerHTML = currentPercentage

          if(currentPercentage<=100){
            waterEl.style.transform = `translateY(${100 - currentPercentage }%)`
          }
        }, 60)

      }
    </script>
  </body>
</html>

5、水球体+svg

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      *,
      *:before,
      *:after {
        box-sizing: border-box;
        outline: none;
      }
      body{
        /* background-color: black; */
      }
    </style>
  </head>
  <body>

<svg
    version="1.1"
    xmlns="https://www.w3.org/2000/svg"
    xmlns:xlink="https://www.w3.org/1999/xlink"
    x="0px"
    y="0px"
    style="display: none"
  >
    <!-- 定义可复用的 icon -->
    <symbol id="wave">
      <path
        d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"
      ></path>
      <path
        d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"
      ></path>
      <path
        d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"
      ></path>
      <path
        d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"
      ></path>
    </symbol>
 </svg>

  <svg viewBox="0 0 560 20" class="water_wave water_wave_front">
    <use xlink:href="#wave"></use>
  </svg>

  </body>
</html>

6、调用svg文件的方法

<img src="xxx.svg" alt="">

六、第三方动画库 snap

1、Snap.svg的初体验

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <script src="./libs/snap.svg-min.js"></script>
  <script>
    window.onload = function() {

      // 1.创建一个svg
      let svg = Snap(300, 300)
      // svg.paper = svg
      // console.log(svg === svg.paper) // true

      // 2.在svg画布中绘制一个圆
      // let c = svg.circle(100, 100, 50)
      let c = svg.paper.circle(100, 100, 50)

      // 3.给圆添加一些属性
      c.attr({
        fill: 'blue'
      })
      // 拿到svg的元素的对象 
      // console.log(svg.node)
      // 4.将svg添加到body中
      document.body.appendChild(svg.node)
    }
  </script>
</body>
</html>

2、Snap.svg操作SVG

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg id="hySvg" width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <rect id="rectangle1" x="0" y="0" width="100" height="50"></rect>
  </svg>

  <script src="./libs/snap.svg-min.js"></script>
  <script>
    window.onload = function() {
      let svg = Snap('#hySvg')
      let paper = svg.paper

      // 1.绘制一个矩形
      let rectangle = paper.rect(0, 100, 100, 50)
      rectangle.attr({
        fill: 'red'
      })

      // 2.选择一个矩形
      let rectangle1 = paper.select('#rectangle1')
      rectangle1.attr({
        fill: 'green'
      })

    }
  </script>
</body>
</html>

3、Snap.svg动画的实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg id="hySvg" width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <rect id="rectangle1" x="0" y="0" width="100" height="50"></rect>
  </svg>

  <script src="./libs/snap.svg-min.js"></script>
  <script>
    window.onload = function() {
      let svg = Snap('#hySvg')
      let paper = svg.paper

      // 1.绘制一个矩形
      let rectangle = paper.rect(0, 100, 100, 50)
      rectangle.attr({
        fill: 'red'
      })

      // 2.选择一个矩形
      let rectangle1 = paper.select('#rectangle1')
      rectangle1.attr({
        fill: 'green'
      })

      // 3.动画的实现( requestAnimatationFrame  1s 61次)
      // Snap.animate(
      //   0, // from
      //   200, // to
      //   function(val) {
      //     console.log('val', val)
      //     // 这里会回调 61 次, 会将0-200拆分成61份
      //     rectangle1.attr({
      //       x: val
      //     })
      //   },
      //   1000, // 毫秒 -> 1s
      //   mina.linear,
      //   function() {
      //     console.log('动画结束了')
      //   }
      // )
    

      Snap.animate(
        [0, 0], // from x ,y 
        [200, 200], // to x, y
        function(val) {
          console.log('val', val)
          // 这里会回调 61 次, 会将0-200拆分成61份
          rectangle1.attr({
            x: val[0],
            y: val[1]
          })
        },
        3000, // 毫秒 -> 1s
        mina.easeout,
        function() {
          console.log('动画结束了')
        }
      )


    }
  </script>
</body>
</html>

4、鳄鱼+Snap-temp

七、第三方动画库 -gsap

1、gsap的初体验

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <rect id="rectangle" x="0" y="0" width="100" height="50" fill="red"></rect>
  </svg>

  <!-- 
    window.gsap = {}
   -->
   <script src="./libs/gsap.min.js"></script>
   <script>
    window.onload =function() {
      // selector( document.querySelectorAll() ) | domEL
      gsap.to('#rectangle', {
        x: 200,
        duration: 2 // 秒
      })
    }
   </script>
</body>
</html>

2、gsap补间动画---tween 点击后的事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <rect id="rectangle" x="100" y="100" width="100" height="100" fill="red"
    onclick="scaleRectangle()" 
    ></rect>
  </svg>

  <!-- 
    window.gsap = {}
   -->
   <script src="./libs/gsap.min.js"></script>
   <script>

    function scaleRectangle() {
      // 1.补间动画( 参数一也是支持数组的 )
      // gsap.to(['#rectangle'], {
      //   scale: 0.5, // 1 - 0.5
      //   duration: 1
      // })

      // gsap.from(['#rectangle'], {
      //   scale: 0.3,  // 0.3 - 1
      //   duration: 1
      // })

      

      // gsap.fromTo(['#rectangle'], 
      //   {
      //     scale: 0,  // 0%
      //     // duration: 4 // 0.5
      //   },
      //   {
      //     scale: 1,  // 100%
      //     duration: 2, // 0.5
      //     repeat:1,
      //   })


      // gsap.to(['#rectangle'], {
      //   scale: 0.5, // 1 - 0.5
      //   duration: 1,
      //   // transformOrigin: 'center'  // 动画的原点
      //   // transformOrigin: 'left'  // 动画的原点
      //   // transformOrigin: 'top'  // 动画的原点
      //   // transformOrigin: 'right'  // 动画的原点
      //   // transformOrigin: 'bottom'  // 动画的原点
      // })



      gsap.to(['#rectangle'], {
        scale: 0.5, // 1 - 0.5
        duration: 1,
        transformOrigin: 'center',  // 动画的原点
        ease: 'bounce.out'   // power1.out
      })



    }
    
   </script>
</body>
</html>

3、gsap动画时间线---delay 使用原始的delay实现按顺序执行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <rect id="rectangle1" x="0" y="0" width="50" height="50" fill="red" onclick="scaleRectangle()" ></rect>
    <rect id="rectangle2" x="100" y="0" width="50" height="50" fill="red"></rect>
    <rect id="rectangle3" x="200" y="0" width="50" height="50" fill="red"></rect>
  </svg>

  <!-- 
    window.gsap = {}
   -->
   <script src="./libs/gsap.min.js"></script>
   <script>
    function scaleRectangle() {
      // 1 - 3
      gsap.to('#rectangle1', {
        scale: 0.5,
        duration: 1
      })

      gsap.to('#rectangle2', {
        scale: 0.5,
        duration: 1,
        delay: 1
      })

      gsap.to('#rectangle3', {
        scale: 0.5,
        duration: 1,
        delay: 2
      })

    }
   </script>
</body>
</html>

4、gsap动画时间线---timeline 使用动画库的timeline方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>

</head>
<body>

  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" >
    <rect id="rectangle1" x="0" y="0" width="50" height="50" fill="red" onclick="scaleRectangle()" ></rect>
    <rect id="rectangle2" x="100" y="0" width="50" height="50" fill="red"></rect>
    <rect id="rectangle3" x="200" y="0" width="50" height="50" fill="red"></rect>
  </svg>

  <!-- 
    window.gsap = {}
   -->
   <script src="./libs/gsap.min.js"></script>
   <script>
    function scaleRectangle() {

      let timeline = gsap.timeline() // 动画时间线

      timeline.to(['#rectangle1', '#rectangle2'], {
        scale: 0.5,
        duration: 1
      })

      // .to('#rectangle2', {
      //   scale: 0.5,
      //   duration: 1,
      // })

      .to('#rectangle3', {
        scale: 0.5,
        duration: 1,
      })

    }
   </script>
</body>
</html>

5、滑板车生成动画

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 滑板车 -->
    <svg
      id="scooter"
      height="512"
      width="512"
      viewBox="0 0 512.004 512.004"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        id="footer-block"
        d="m175.669 463.803c-8.283 0-15-6.716-15-15 0-53.743-43.723-97.467-97.467-97.467-14.622 0-28.673 3.153-41.762 9.371-7.483 3.555-16.432.371-19.986-7.112-3.555-7.482-.37-16.431 7.113-19.985 17.143-8.143 35.525-12.273 54.635-12.273 70.286 0 127.467 57.182 127.467 127.467 0 8.283-6.714 14.999-15 14.999z"
        fill="#c5e1e6"
      />
      <path
        id="footboard2"
        d="m442.768 321.476c-63.027 2.945-113.414 51.086-120.563 112.327h-210.801c-8.285 0-15 6.716-15 15s6.715 15 15 15h224.932c8.285 0 15-6.716 15-15 0-52.162 40.777-94.928 92.832-97.36 8.275-.387 14.67-7.408 14.283-15.684-.387-8.275-7.402-14.684-15.683-14.283z"
        fill="#008adf"
      />
      <path
        id="footboard1"
        d="m442.768 321.476c-63.027 2.945-113.414 51.086-120.563 112.327h-66.204v30h80.335c8.285 0 15-6.716 15-15 0-52.162 40.777-94.928 92.832-97.36 8.275-.387 14.67-7.408 14.283-15.684-.387-8.275-7.402-14.684-15.683-14.283z"
        fill="#0065a3"
      />
      <path
        id="scooter-head"
        d="m448.787 415.604c-7.721 0-14.279-5.923-14.932-13.755l-28.796-345.572c-1.291-15.484-11.852-26.275-20.521-26.275-8.283 0-15-6.716-15-15s6.717-15 15-15c12.9 0 25.295 5.971 34.9 16.811 8.852 9.99 14.361 23.12 15.518 36.972l28.797 345.573c.688 8.256-5.447 15.506-13.703 16.194-.425.035-.847.052-1.263.052z"
        fill="#8db9c4"
      />
      <circle id="wheel4" cx="63.203" cy="448.803" fill="#c5e1e6" r="48.2" />
      <path
        id="wheel3"
        d="m63.203 512.002c-34.848 0-63.199-28.351-63.199-63.199 0-34.849 28.352-63.199 63.199-63.199 34.85 0 63.201 28.35 63.201 63.199 0 34.848-28.352 63.199-63.201 63.199zm0-96.398c-18.306 0-33.199 14.893-33.199 33.199 0 18.307 14.894 33.199 33.199 33.199 18.307 0 33.201-14.893 33.201-33.199s-14.895-33.199-33.201-33.199z"
        fill="#1d4659"
      />
      <circle id="wheel2" cx="448.803" cy="448.803" fill="#8db9c4" r="48.2" />
      <g fill="#0e232c">
        <path
          id="wheel1"
          d="m448.803 512.002c-34.848 0-63.199-28.351-63.199-63.199 0-34.849 28.352-63.199 63.199-63.199 34.85 0 63.201 28.35 63.201 63.199 0 34.848-28.352 63.199-63.201 63.199zm0-96.398c-18.307 0-33.199 14.893-33.199 33.199 0 18.307 14.893 33.199 33.199 33.199 18.307 0 33.201-14.893 33.201-33.199s-14.895-33.199-33.201-33.199z"
        />
        <path
          id="head-block"
          d="m352.402.002c-8.283 0-15 6.716-15 15s6.717 15 15 15h32.135v-30h-32.135z"
        />
      </g>
    </svg>
    <script src="./libs/gsap.min.js"></script>
    <script>
     window.onload = function() {

      let tl = gsap.timeline({
        repeat: -1, // 重复的次数
        // yoyo: true // 反向执行动画
      })

      // 1.给车轮做动画
      tl.from(
        [
        '#wheel1', // begin= 0s
        '#wheel2', // 0.2
        '#wheel3', // 0.4
        '#wheel4' // 0.6
        ], 
        {
        scaleX: 0,
        scaleY: 0,
        duration: 1,
        transformOrigin: 'center',
        ease: 'bounce.out',
        stagger: 0.2
      })

      .from(
        [
          "#footboard1",
          "#footboard2"
        ]
        , {
          scaleX: 0,
          duration: 1,
          transformOrigin: 'left',
          ease: 'bounce.out',
        })

      .from(
        [
          "#scooter-head"
        ]
        , {
          scaleY: 0,
          duration: 1,
          transformOrigin: 'bottom',
          ease: 'bounce.out',
        })

      .from(
        [
          "#head-block",
          "#footer-block"
        ]
        , {
          scaleX: 0,
          duration: 1,
          transformOrigin: 'right',
          ease: 'bounce.out',
        })



     }
    </script>
  </body>
</html>

数据可视化 SVG （二）

悦读