SVG路径动画

最新推荐文章于 2024-07-31 18:05:40 发布

I‘m fine

最新推荐文章于 2024-07-31 18:05:40 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_43866528/article/details/120224383

svg 同时被 2 个专栏收录

2 篇文章

订阅专栏

HTML5

1 篇文章

订阅专栏

本文展示了三个SVG动画效果：圆点沿着路径移动的动态动画，水珠沿直线流动的视觉效果，以及线条水流的流动动画。通过SVG的`<animateMotion>`和`<animate>`标签实现连续、循环的动画，为网页增添生动的视觉元素。

直接贴图和代码吧！

圆点动画

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