如何为运动成圈的svg元素添加运动模糊的尾巴？

Question

我正在学习如何编码/创建SVG，目前正在研究加载指示器。这个概念很简单；一圈，绕圈走动。

但是，我想通过向运动的圆中添加模糊效果（实际上是创建模糊的尾巴）来使运动看起来更逼真。我搜索后发现，您可以在x或y方向上进行运动模糊，但是由于我的圈子不断在x和y之间切换，因此无法达到预期的效果。我还尝试过通过在圆环的后面添加较低的不透明度，逐渐变小的圆来伪造它，但是如果图像较大，则看起来很糟糕。我知道我可以代替模拟填充模糊的填充渐变的路径，但是我很好奇，实现这种运动模糊效果的最佳/标准方法是什么？

Answer 1

好吧，您可以执行类似的操作，从而添加方向性模糊并使其略微消失，现有的转换将适当地旋转它

svg {
  max-width:500px
}

svg .cls-1 {
  fill: #F00;
}

svg .white {
  fill: white;
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <title>Test</title>
  <defs>
    <filter id="directional-blur" x="-50%" width="200%">
      <feGaussianBlur stdDeviation="3 0"/>
      <feOffset dx="-2"/>
      <feMorphology operator="erode" radius="1"/>
      <feComposite operator="over" in="SourceGraphic"/>
    </filter>
  </defs>
      <circle filter="url(#directional-blur)" class="cls-1" cx="50" cy="22" r="12" >
        <animateTransform attributeName="transform"
        attributeType="XML"
        type="rotate"
        from="0 50 50"
        to="360 50 50"
        dur="2s"
        repeatCount="indefinite" />
      </circle>  
</svg>