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

Question

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

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

Answer 1

好吧，你可以做这样的事情，它会添加一个方向模糊并稍微腐 eclipse 它，你现有的变换会适本地旋转它

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>