如何将运动模糊的尾巴添加到圆形的 svg 元素中？答案

【问题标题】：How to add motion blurred tail to an svg element going in a circle?如何将运动模糊的尾巴添加到圆形的 svg 元素中？
【发布时间】：2016-04-21 12:18:42
【问题描述】：

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

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

【问题讨论】：

请用你现在拥有的东西创建一个MCVE。正确的解决方案可能取决于移动圆的相对大小及其路径。
这是我目前所拥有的...CodePen

标签： javascript css svg smil

【解决方案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>

【讨论】：

有什么办法可以让这条尾巴变长，让移动的圆圈看起来像彗星？
feMorphology 在 Chrome 中当您将其放入动画中时会出现一些问题 - 因此您无法使用此方法在过滤器中添加多个图层 - 它会产生伪影。我建议在内容中明确地画一条尾巴，并使用一个简单的过滤器来模糊它。