试图动画SVG渐变

Question

我正在使用SVG尝试和动画渐变路径 - 创建一个尾巴/流星效果。在这样做的时候，我想要在尾部前部制作一个物体，我在下面的例子中展示了这些物体（圆圈）。

该示例在谷歌浏览器中几乎没有任何作用，还没有检查其他人......您可以看到我有5个圈/路径，只有其中一个正常工作。弯曲的人以与对象不同的速度对渐变进行动画处理，除了“几乎水平”的外，其他人不能正常工作。

有人可以请提供一些见解，为什么这不起作用，建议一种方法，我可以做到这一点，并提供一个例子，如果可能？

我几乎到了我会只写我自己在画布渲染代码，并使用JS库点... :(

<svg style="height: 400px; width: 100%" viewBox="0 0 500 200"> 
 
    <path id="circlePath1" stroke-width="2" d="M10 100 Q 100 10, 150 80 T 300 100" stroke="url(#grad)" fill="transparent"></path> 
 
\t <path id="circlePath2" stroke-width="2" d="M30 20 L 130 19" stroke="url(#grad)" fill="transparent"></path> 
 
\t <path id="circlePath3" stroke-width="2" d="M30 10 L 130 10" stroke="url(#grad)" fill="transparent"></path> 
 
\t <path id="circlePath4" stroke-width="2" d="M10 10 L 10 110" stroke="url(#grad)" fill="transparent"></path> 
 
\t <path id="circlePath5" stroke-width="2" d="M10 20 L 20 110" stroke="url(#grad)" fill="transparent"></path> 
 
\t 
 
\t <linearGradient id='grad'> 
 
\t \t <stop stop-opacity="0" stop-color='#800'> 
 
\t \t \t <animate attributeName="offset" dur="2s" values='-0.20;0.80' repeatCount="indefinite" ></animate> 
 
\t \t </stop> 
 
\t \t <stop stop-color='#800' stop-opacity=".5"> 
 
\t \t \t <animate attributeName="offset" dur="2s" values='-0.02;0.98' repeatCount="indefinite" ></animate> 
 
\t \t </stop> 
 
\t \t <stop stop-opacity="0.5" stop-color='#800'> 
 
\t \t \t <animate attributeName="offset" dur="2s" values='-0;1' repeatCount="indefinite" ></animate> 
 
\t \t </stop> 
 
\t \t <stop stop-opacity="0" stop-color='#800'> 
 
\t \t \t <animate attributeName="offset" dur="2s" values='-0;1' repeatCount="indefinite" ></animate> 
 
\t \t </stop> 
 
\t </linearGradient> 
 
\t 
 
\t <circle id="c1" r="2.5" cx="" cy="" fill="#880000"> 
 
\t \t <animateMotion dur="2s" repeatCount="indefinite"> 
 
\t \t \t <mpath href="#circlePath1"></mpath> 
 
\t \t </animateMotion> 
 
\t </circle> 
 
\t <circle id="c2" r="2.5" cx="" cy="" fill="#880000"> 
 
\t \t <animateMotion dur="2s" repeatCount="indefinite"> 
 
\t \t \t <mpath href="#circlePath2"></mpath> 
 
\t \t </animateMotion> 
 
\t </circle> 
 
\t <circle id="c3" r="2.5" cx="" cy="" fill="#880000"> 
 
\t \t <animateMotion dur="2s" repeatCount="indefinite"> 
 
\t \t \t <mpath href="#circlePath3"></mpath> 
 
\t \t </animateMotion> 
 
\t </circle> 
 
\t <circle id="c4" r="2.5" cx="" cy="" fill="#880000"> 
 
\t \t <animateMotion dur="2s" repeatCount="indefinite"> 
 
\t \t \t <mpath href="#circlePath4"></mpath> 
 
\t \t </animateMotion> 
 
\t </circle> 
 
\t <circle id="c5" r="2.5" cx="" cy="" fill="#880000"> 
 
\t \t <animateMotion dur="2s" repeatCount="indefinite"> 
 
\t \t \t <mpath href="#circlePath5"></mpath> 
 
\t \t </animateMotion> 
 
\t </circle> 
 
</svg>

Answer 1

在这种尝试我使用由线路掩蔽的径向梯度创建的踪迹，则单独的点。

<svg width="500" height="300" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <defs> 
 
    <path id="motion-path" stroke-width="2" d="M202.4 58.3c-13.8.1-33.3.4-44.8 9.2-14 10.7-26.2 29.2-31.9 45.6-7.8 22.2-13.5 48-3.5 70.2 12.8 28.2 47.1 43.6 68.8 63.6 19.6 18.1 43.4 26.1 69.5 29.4 21.7 2.7 43.6 3.3 65.4 4.7 19.4 1.3 33.9-7.7 51.2-15.3 24.4-10.7 38.2-44 40.9-68.9 1.8-16.7 3.4-34.9-10.3-46.5-9.5-8-22.6-8.1-33.2-14.1-13.7-7.7-27.4-17.2-39.7-26.8-5.4-4.2-10.4-8.8-15.8-12.9-4.5-3.5-8.1-8.3-13.2-11-6.2-3.3-14.3-5.4-20.9-8.2-5-2.1-9.5-5.2-14.3-7.6-6.5-3.3-12.1-7.4-19.3-8.9-6-1.2-12.4-1.3-18.6-1.5-10.2-.3-20.2-1.5-30.3-1" stroke="#666" fill="none"/> 
 
    <mask id="path-mask"> 
 
     <use xlink:href="#motion-path" stroke="#666"/> 
 
    </mask> 
 
    <symbol id="ball"> 
 
     <circle id="ball" r="2.5" fill="#800"> 
 
     <animateMotion dur="5s" repeatCount="indefinite"> 
 
      <mpath xlink:href="#motion-path"/> 
 
     </animateMotion> 
 
     </circle> 
 
    </symbol> 
 
    <symbol id="trail"> 
 
     <circle r="30" fill="url(#grad)"> 
 
     <animateMotion dur="5s" repeatCount="indefinite" rotate="auto"> 
 
      <mpath xlink:href="#motion-path"/> 
 
     </animateMotion> 
 
     </circle> 
 
    </symbol> 
 
    <linearGradient id="grad"> 
 
     <stop offset="0" stop-opacity="0" stop-color="#800"/> 
 
     <stop offset=".5" stop-opacity=".8" stop-color="#800"/> 
 
     <stop offset=".5" stop-opacity="0" stop-color="#800"/> 
 
    </linearGradient> 
 
    </defs> 
 
    <use xlink:href="#ball"/> 
 
    <use xlink:href="#trail" mask="url(#path-mask)"/> 
 
</svg>

它有它的局限性（如果路径太近，你会得到两个位上显示的轨迹），但希望这给你一个想法玩。