SVG路径动画

直接贴图和代码吧！

圆点动画

<svg width="350" height="200">
      <path d="M10 80 Q 77.5 10, 145 80 T 280 80" stroke="yellow" stroke-width="2" fill="transparent"></path>
      <circle cx="0" cy="0" r="2" fill="red">
          <animateMotion
                  path="M10 80 Q 77.5 10, 145 80 T 280 80"
                  dur="5s"
                  begin="1s"
                  fill="remove"
                  rotate="auto"
                  repeatCount="indefinite"
          >
          </animateMotion>
      </circle>
</svg>

水珠流动

<svg width="250" height="250">
     <path d="M10 80 H 100 V 200 H 10" stroke="orange"  stroke-linecap="round"  stroke-width="10" fill="transparent"></path>
     <rect width="6" height="2" rx="2" ry="2" fill="red" stroke-width="1" stroke="red" v-for="i in 20">
         <animateMotion
                 path="M10 80 H 100 V 200 H 10"
                 dur="10s"
                 :begin="1+(i - 1)*0.5+'s'"
                 fill="remove"
                 rotate="auto"
                 repeatCount="indefinite"
         >
         </animateMotion>
     </rect>
</svg>

水流

<svg width="250" height="250">
      <path d="M10 80 H 100 V 200 H 10" stroke="orange"  stroke-linecap="round"  stroke-width="10" fill="transparent"></path>
      <path d="M10 80 H 100 V 200 H 10" stroke="red" stroke-dasharray="320" stroke-dashoffset="0" stroke-linecap="round" stroke-width="10" fill="transparent">
          <animate attributeType="CSS" attributeName="stroke-dashoffset" from="320" to="0" dur="5s" repeatCount="indefinite"/> 
      </path>
</svg>