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

Question

我在我创建的这个 SVG 上有一个过滤器，我希望能够对其进行动画处理，以便 colors 在循环中对角移动，使其看起来像一个旋转的行星。

在下面的代码中，我展示了我的 SVG 以及我希望它如何从右上角的蓝色开始，然后是第二个 SVG 是我试图用 Z6F1C25ED1523092F1BBF9DEEBE5Z9 实现的目标。 我希望 animation 循环给它旋转效果。

这可能与 SVG 有关吗？ 或者有没有更简单的方法可以在不使用 SVG 的情况下实现这一目标？

我也在使用 React 来构建这个页面（如果重要的话）。

 <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>

这里还有一个 JSFiddle： https://jsfiddle.net/illusive_yeti/nxg4st8q/5/

Answer 1

您可以使用SMIL为 feOffset 过滤器的值设置动画。

 <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>