有没有办法用 colors 为 SVG 过滤器设置动画以实现旋转行星效果？

Question

I have a filter on this SVG I created and I want to be able to animate it so that the colors move diagonally on a loop to make it look like a planet that's spinning.

In the code below I show my SVG and how I'd like it to start with the blue color toward the upper-right and then the second SVG is what I'm trying to achieve with an animation. I would love for the animation to loop to give it the rotating effect.

Is this possible to do with an SVG? Or is there an even simpler way to achieve this without using an SVG?

I'm also using React to build this page (if that matters).

 <div class="planet-container"> <p style="color: #fff; padding: 2em;">Beginning</p> <svg viewBox="0 0 210 210"> <filter id="inset-shadow-1" x="-50%" y="-50%" width="200%" height="200%"> <feComponentTransfer in="SourceAlpha"> <feFuncA type="table" tableValues="0 1" /> </feComponentTransfer> <feGaussianBlur stdDeviation="28"/> <feOffset dx="-25" dy="35" result="offsetblur"/> <feFlood flood-color="rgba(255, 207, 113, 0.8)" result="color"/> <feComposite in2="offsetblur" operator="in"/> <feComposite in2="SourceAlpha" operator="in" /> <feMerge> <feMergeNode in="SourceGraphic" /> <feMergeNode /> </feMerge> <feDropShadow dx="-2" dy="4" stdDeviation="5" flood-color="rgba(255, 207, 113, 0.2)"/> <feDropShadow dx="2" dy="-4" stdDeviation="5" flood-color="rgba(35, 118, 221, 0.2)"/> </filter> <circle cx='105' cy='115' r='76' fill='rgb(35, 118, 221)' filter="url(#inset-shadow-1)" /> </svg> </div> <div class="planet-container"> <p style="color: #fff; padding: 2em;">End</p> <svg viewBox="0 0 210 210"> <filter id="inset-shadow-2" x="-50%" y="-50%" width="200%" height="200%"> <feComponentTransfer in="SourceAlpha"> <feFuncA type="table" tableValues="0 1" /> </feComponentTransfer> <feGaussianBlur stdDeviation="28"/> <feOffset dx="25" dy="-35" result="offsetblur"/> <feFlood flood-color="rgba(255, 207, 113, 0.8)" result="color"/> <feComposite in2="offsetblur" operator="in"/> <feComposite in2="SourceAlpha" operator="in" /> <feMerge> <feMergeNode in="SourceGraphic" /> <feMergeNode /> </feMerge> <feDropShadow dx="-2" dy="4" stdDeviation="5" flood-color="rgba(255, 207, 113, 0.2)"/> <feDropShadow dx="2" dy="-4" stdDeviation="5" flood-color="rgba(35, 118, 221, 0.2)"/> </filter> <circle cx='105' cy='115' r='76' fill='rgb(35, 118, 221)' filter="url(#inset-shadow-2)" /> </svg> </div>

Here is also a JSFiddle: https://jsfiddle.net/illusive_yeti/nxg4st8q/5/

Answer 1

You can animate the feOffset filter's values using SMIL .

 <div class="planet-container"> <p style="color: #fff; padding: 2em;">Beginning</p> <svg viewBox="0 0 210 210"> <filter id="inset-shadow-1" x="-50%" y="-50%" width="200%" height="200%"> <feComponentTransfer in="SourceAlpha"> <feFuncA type="table" tableValues="0 1" /> </feComponentTransfer> <feGaussianBlur stdDeviation="28"/> <feOffset dx="-25" dy="35" result="offsetblur"> <animate attributeName="dx" from="-125" to="125" dur="5s" repeatCount="indefinite" /> <animate attributeName="dy" from="125" to="-125" dur="5s" repeatCount="indefinite" /> </feOffset> <feFlood flood-color="rgba(255, 207, 113, 0.8)" result="color"/> <feComposite in2="offsetblur" operator="in"/> <feComposite in2="SourceAlpha" operator="in" /> <feMerge> <feMergeNode in="SourceGraphic" /> <feMergeNode /> </feMerge> <feDropShadow dx="-2" dy="4" stdDeviation="5" flood-color="rgba(255, 207, 113, 0.2)"/> <feDropShadow dx="2" dy="-4" stdDeviation="5" flood-color="rgba(35, 118, 221, 0.2)"/> </filter> <circle cx='105' cy='115' r='76' fill='rgb(35, 118, 221)' filter="url(#inset-shadow-1)" /> </svg> </div>