BitLeap
Flight Path

SVG 航线动画

按住小飞机拖出一条虚线航线，飞机沿航线飞、虚线同步铺开；拖锚点微调，导出自带动画的 SVG—— 纯 SMIL，零脚本，直接嵌进网页或用浏览器打开就会动。（设计软件与 PPT 只能当静态图导入）

0 点0 px0 px/s0%
按住小飞机拖动，画出第一条航线
4.4s

按住小飞机拖动 = 画一条新航线（会替换原来的）

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 960 540" width="960" height="540" role="img" aria-label="航线动画">
  <title>航线动画</title>
  <desc>沿虚线航线飞行的动画。由 BitLeap 航线动画生成。</desc>
  <defs>
    <filter id="glow-t4p7fw" x="-40%" y="-40%" width="180%" height="180%">
      <feGaussianBlur stdDeviation="3.75" result="b"/>
      <feMerge>
        <feMergeNode in="b"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <mask id="reveal-t4p7fw" maskUnits="userSpaceOnUse" x="0" y="0" width="960" height="540">
      <path fill="none" stroke="#fff" stroke-width="24" stroke-linecap="butt" stroke-dasharray="0" stroke-dashoffset="0">
        <animate attributeName="stroke-dashoffset" dur="4.4s" repeatCount="indefinite" fill="remove" values="0;0;0" keyTimes="0;0.91;1" calcMode="spline" keySplines="0.42 0 0.58 1;0 0 1 1"/>
      </path>
    </mask>
    <path id="route-t4p7fw" fill="none"/>
  </defs>
  <rect width="960" height="540" fill="#0b1020"/>
  <path fill="none" stroke="#7dd3fc" stroke-opacity="0.22" stroke-width="2.5" stroke-dasharray="7 9" stroke-linecap="round"/>
  <path fill="none" stroke="#7dd3fc" stroke-width="2.5" stroke-dasharray="7 9" stroke-linecap="round" mask="url(#reveal-t4p7fw)" filter="url(#glow-t4p7fw)"/>
  <g filter="url(#glow-t4p7fw)">
    <g transform="scale(1.08)">
      <path d="M12 0L4 -1.2L-2 -1.2L-5 -8L-7.2 -8L-6 -1.2L-9 -1.2L-10.4 -3.2L-11.6 -3.2L-10.6 0L-11.6 3.2L-10.4 3.2L-9 1.2L-6 1.2L-7.2 8L-5 8L-2 1.2L4 1.2Z" fill="#e8f6ff"/>
    </g>
    <animateMotion dur="4.4s" repeatCount="indefinite" fill="remove" rotate="auto" keyPoints="0;1;1" keyTimes="0;0.91;1" calcMode="spline" keySplines="0.42 0 0.58 1;0 0 1 1">
      <mpath xlink:href="#route-t4p7fw" href="#route-t4p7fw"/>
    </animateMotion>
  </g>
</svg>

BitLeap · 本地计算 · 隐私优先