Как добавить размытый хвост движения к элементу 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>