svg流线型沿着设定轨迹运动

最新推荐文章于 2025-07-09 14:32:50 发布

张云，

最新推荐文章于 2025-07-09 14:32:50 发布

阅读量895

点赞数

CC 4.0 BY-SA版权

分类专栏： svg 文章标签：前端 html css3

本文链接：https://blog.youkuaiyun.com/buzhidjiaosha/article/details/129277886

svg 专栏收录该内容

2 篇文章

订阅专栏

该代码示例展示了如何使用SVG元素创建一个路径，并通过设定坐标来定义路径的形状。同时，它应用了径向渐变和动画效果，使圆形沿着路径移动，实现了动态视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

“path”设置轨道每个点的坐标(x y)—>“M0 150” " L2255 70"…

    <svg class='dvSvg' width="7680" height="172">
      <defs>
        <path id="path"
              d="M0 150 L2255 70 L2355 10 L5336 10 L5436 70 L7680 140"
              fill='transparent' />
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" style="stop-color:#03e4fe;stop-opacity:1" />
          <stop offset="20%" style="stop-color:#03e4fe;stop-opacity:.9" />
          <stop offset="100%" style="stop-color:#03e4fe;stop-opacity:0" />
        </radialGradient>
        <mask id="mask">
          <circle id="circle" cx='0' cy='0' r='120' fill='url(#grad1)'>
            <animateMotion dur='10'
                           path="M0 150 L2255 70 L2355 10 L5336 10 L5436 70 L7680 140"
                           rotate='auto' repeatCount='indefinite' />
          </circle>
        </mask>
      </defs>
      <use href='#path' stroke="rgba(0, 0, 0, .1)" strokeWidth='15'>
      </use>
      <use href='#path' stroke="#03e4fe" mask='url(#mask)' stroke-width="10">
        <animate attributeName='stroke-dasharray' from='0, 0' to='0, 0' dur='10s' repeatCount='indefinite' />
      </use>
    </svg>