Data Visualization SVG (2)

Language 2023-04-09 23:30:19 views: null

Table of contents:

1 Gradients and filters

2 SVG Transformation

3 Path stroke animation

4 SMIL animation

5 Third-party animation library

6 SVG Animation Examples

1. Gradient color and filter effect:

1. CSS to achieve frosted glass effect

<!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. Gradient color

<!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. Frosted glass effect achieved by 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 filter effect - blur effect

 <filter id="blurFilter">
        <!--  ......  -->
        <feGaussianBlur stdDeviation="8"></feGaussianBlur>
      </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, 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. Filter effect of svg - blur effect - area 

<filter id="blurFilter" x="50%" y="50%" width="50%" height="25%">
        <feGaussianBlur stdDeviation="8"></feGaussianBlur>
      </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, 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>

Two, the deformation of svg

1. Translate transform="translate(x, y)" attribute

<!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. Rotate-rotatae transform="rotate(45, 50, 25) translate(100, 0)" attribute

<!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. Zoom-scale transform="scale(2)" attribute

<!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>

 Three, svg stroke animation

1. stroke stroke animation effect 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. Shorthand for stroke animation effect 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 stroke animation effect 3 The animation performance speed is faster than before

<!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 stroke animation effect 4 Even if it is a curve, it can also move according to the direction of the curve

<!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. Ice cream animation case

<!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>

4. SMIL animation of svg The following element tags are placed in the graphics tag, and each has attributes to adjust the animation

1. Set element-animation The shortcoming of set is that there is no excessive animation, and it is jumping.

<!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. Animate element-animation

<!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 translation animation

<!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 Rotation The center of rotation is defined by the 2nd and 3rd parameters of from and to. You can also use value abbreviation

<!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 scaling animation 2 parameters correspond to the xy axis respectively

<!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 animation The rotate of this label can automatically control the direction of the graphics, and the path controls the 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 animation-reuse path Use the mpath tag in the animateMotion tag to set the route

<!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 animation-optimization By setting xy to the negative half length and width of the small rectangle, the center of the graphic can move in a straight line

<!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>

Five, svg animation case

1. Aircraft flight 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>
  </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. Progress bar loading animation

<!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. Positioning animation + 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. Water sphere+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. Water sphere + 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. The method of calling the svg file

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

6. The third-party animation library snap

1. First experience of 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 to operate 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. Realization of Snap.svg animation

<!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. Crocodile + Snap-temp

7. Third-party animation library-gsap

1. The first experience of 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 animation---event after tween click

<!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. The gsap animation timeline --- delay uses the original delay to implement sequential execution

<!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 animation timeline --- timeline uses the timeline method of the animation library

<!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. The scooter generates animation

<!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>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Guess you like

Origin blog.csdn.net/weixin_56663198/article/details/129389849
Recommended
The “35-year-old curse” of Chinese coders
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Ranking
Methods and Practices of Manufacturing Data Quality Improvement
Serial port upgrade program for efficient transmission of large firmware
Use KITTI to run LIOSAM and complete the EVO evaluation
Calling methods on string literals (Java)
ActiveMQ and Spring integration (4)
You have to know the HTTPS! ! !
PAT whether Structures and Algorithms 7-4 with a binary search tree (40 rows streamlined structure)
el-upload brings request background
UVA - 1204 Fun Game-like pressure dp
2019-12-28
Daily
More
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)

Code World

© 2018 codetd.com