有没有一种方法可以为 SVG 的滤镜设置动画以实现带有颜色的旋转行星效果？

Question

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

在下面的代码中，我展示了我的 SVG 以及我希望它如何从右上角的蓝色开始，然后第二个 SVG 是我试图通过动画实现的。我希望动画循环播放以产生旋转效果。

这可能与 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>

有没有一种方法可以为 SVG 的滤镜设置动画以实现带有颜色的旋转行星效果？

Is there a way to animate an SVG's filter in order to achieve a rotating planet effect with the colors?

html

javascript

css

svg

reactjs