如何将运动模糊的尾巴添加到一个圆圈中的 svg 元素？

Question

我正在学习如何 code/create SVG，目前正在研究加载指示器。这个概念很简单；一个圈子，围着圈子转。

但是，我想通过向移动的圆圈添加模糊效果（实质上是创建模糊的尾巴）来使动作看起来更逼真。我已经搜索并发现您可以在 x 或 y 方向上进行运动模糊，但这不会达到预期的效果，因为我的圆圈不断在 x 和 y 之间切换。我还尝试通过在我的圆圈后面添加较低的不透明度、逐渐变小的圆圈来伪造它，但如果图像很大，那看起来很糟糕。我知道我可以制作一条路径而不是一个带有模拟模糊的填充渐变的圆圈，但我很好奇，实现这种运动模糊效果的 best/standard 方法是什么？

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>

如何将运动模糊的尾巴添加到一个圆圈中的 svg 元素？

How to add motion blurred tail to an svg element going in a circle?

javascript

css

svg

smil