有沒有辦法為SVG的過濾器設定影片，以便用顏色實作旋轉的行星效果？

我在我創建的這個 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/

uj5u.com熱心網友回復：

您可以使用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>

標籤：

上一篇：如何使滾動影片系結到特定的div滾動條

下一篇：我如何制作倒計時回圈