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

该代码示例展示了如何使用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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值