分享用svg实现一个飞星轨迹效果

来说一下效果：

淡蓝色的流星沿着正方形四边移动。

下面说一下我的实现步骤：

1. 现在写一个400 * 400 的div 以及400 * 400 的svg 。 div的作用等下说。

<div class="box">
        <svg width="400" height="400">
        </svg>
    </div> 

2.用path标签绘制两个正方形。 （当然用rect标签也可以）

            <path d="M 5 5 L 395 5 L 395 395 L 5 395Z" fill="red">
            </path>
            <path d="M 5 5 L 395 5 L 395 395 L 5 395Z" fill="blue">
            </path>

可以看到这两个path除了颜色其他的都一样，我们可以把path给提取出来。

            <defs>
               <path id="fly-path" d="M 5 5 L 395 5 L 395 395 L 5 395Z" />
           </defs>
           <use href="#fly-path" fill="red"></use>
           <use href="#fly-path" fill="blue"></use>

现在的页面因为后面的path把前面的path盖住了所以是蓝色的。 我们要实现的是一个轨迹，所以呀并不需要填充颜色（只是为了展示当前页面的状态），因此给每个path添加边框就好了，去掉path的fill属性，添加stroke 和stroke-width属性。

3.使用蒙版来实现飞星。

• 蒙版的作用我简单说一下，就是蒙版内部的形状 与 使用蒙版的标签重合的部分会显示出来，并且他们的颜色会叠加。下面用一个例子来展示：

            <mask id="fly-mask">
                    <circle r="80" cx="200" cy="200" fill="blue"></circle>
            </mask>
            <use href="#fly-path" fill="#fff"  stroke="#000" stroke-width="1"></use>
            <use href="#fly-path" fill="red"  stroke="#4fd2dd" stroke-width="3"
                 mask="url(#fly-mask)"
            ></use>

可以看到，我们给第二个path添加了红色的填充，给蒙版的中心绘制了一个半径80的圆，蓝色的填充，而页面上看到的只有一个灰色的圆，说蒙版的作用就如我上面所说。

4.接下来只需要把蒙版里的圆绘制在 (0, 0)的位置，然后让他沿着轨迹移动，这样的效果就是飞星的效果。

那怎么让圆动呢？ svg提供了animateMotion标签，它可以实现我们需要的轨迹动画。

                <circle r="80" cx="0" cy="0" fill="#fff">
                    <animateMotion
                            dur="3s" path="M 5 5 L 395 5 L 395 395 L 5 395Z"
                            repeatCount="indefinite" rotate="auto"
                     />
                </circle>

5.现在已经实现动画效果了，但是颜色还不太对。

可以看到我们现在的流星啊颜色很死板，正常流星应该是头比较亮尾比较暗。怎么实现呢？使用radialGradient 标签 创建径向渐变的颜色。

                <radialGradient id="flyRadialId"
                    cx="50%" cy="50%" fx="100%" fy="50%" r="50%" 
                >
                    <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
                    <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
                </radialGradient>
                <!-- 给蒙版里的圆填充色设置为上面定义的渐变色 -->
                <circle r="80" cx="0" cy="0" fill="url(#flyRadialId)">

最后给外面的div填充黑色背景色来增强流星的视觉效果。