有沒有辦法用 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>