如何將運動模糊的尾部添加到正在進入圓圈的svg元素中？

我正在學習如何編寫/創建SVG，並且正在處理加載指示符。這個概念很簡單，一個圓圈，在一個圓圈中移動。如何將運動模糊的尾部添加到正在進入圓圈的svg元素中？

但是，我想通過爲移動的圓圈添加模糊（基本上創建模糊的尾部）使運動看起來更真實。我搜索並發現可以在x或y方向上運動模糊，但由於我的圓圈不斷在x和y之間切換，因此無法達到所需的效果。我也嘗試通過添加較低的不透明度，漸漸縮小到我的圈子後面的圓圈，但如果圖片很大，看起來很糟糕。我知道我可以改爲創建一個路徑，而不是一個填充漸變的模糊模糊的循環，但我很好奇，什麼是實現這種運動模糊效果的最佳/標準方法？

來源

2016-04-21 WiseOlMan

的照顧，請創建[MCVE]（http://stackoverflow.com/help/mcve）與你現在擁有的。正確的解決方案可能取決於移動圓的相對大小及其路徑。 –

這是我到目前爲止... [CodePen]（http://codepen.io/WiseOlMan/pen/GZBypK） – WiseOlMan

那麼你可以做這樣的事情，還增加了一個方向模糊，侵蝕了一點，現有的變換，你必須採取適當的旋轉它

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>

來源

2016-04-23 04:28:13

如何將運動模糊的尾部添加到正在進入圓圈的svg元素中？

回答

相關問題