我正在研究一個非線性選單，我希望它在懸停在選項上時有一個漂亮的影片。我設法組裝了一個我喜歡的湍流 svg 過濾器。現在我想知道如何做到這一點，以便當一個人將滑鼠懸停在選項上時，湍流逐漸增加，并且在滑鼠移出時在相反方向上發生同樣的情況，它會慢慢消失。
通過js解決這個問題最直接的方法是什么？
我不太熟悉 svg 過濾器。我應該直接操縱 baseFrequency 的值嗎？我認為這會影響所有節點，而不僅僅是懸停在上面的那個。有什么辦法可以利用 css 嗎？有沒有辦法將引數傳遞給過濾器？
這是手工制作的 svg 過濾器代碼以及從我的設計應用程式匯出的 -simplified- svg 代碼。我省略了圓的筆畫資料。
<defs>
<filter filterUnits="userSpaceOnUse" id="turbulence" x="0" y="0" width="100%" height="100%">
<feTurbulence id="base_turbulence" numOctaves="3" seed="2" baseFrequency="0.02 0.05"></feTurbulence>
<feDisplacementMap scale="20" in="SourceGraphic"></feDisplacementMap>
</filter>
<animate xlink:href="#base_turbulence" attributeName="baseFrequency" dur="60s" keyTimes="0;0.5;1" values="0.01 0.02;0.02 0.03;0.01 0.03" repeatCount="indefinite"/>
</defs>
<g id="ser" class="node" transform="matrix(1,0,0,1,84,88)">
<g class="circle" transform="matrix(1,0,0,1,-12,13)" filter="url(#turbulence)">
<g transform="matrix(1,0,0,1,-179,-8)">
<circle cx="512.5" cy="229.5" r="53.5" style="fill:rgb(255,235,187);"/>
<path d="(...)"/>
</g>
<g class="marker" transform="matrix(1.24299,0,0,1.24299,-303.533,-63.7664)">
<path d="(...)"/>
</g>
</g>
<g transform="matrix(1,0,0,1,0,-21.3664)">
<text x="342px" y="229px" style="font-family:'LibreBaskerville-Regular', 'Libre Baskerville';font-size:47.751px;stroke:rgb(2,2,2);stroke-width:1px;">S<tspan x="379.962px 414.486px " y="229px 229px ">er</tspan></text>
</g>
<g transform="matrix(1,0,0,1,-18.1341,1.72278)">
<text x="344.149px" y="246px" style="font-family:'LibreBaskerville-Regular', 'Libre Baskerville';font-size:25.202px;stroke:rgb(2,2,2);stroke-width:1px;">El Silencio Donde Escucho</text>
</g>
</g>
<g id="propuestas" class="node" transform="matrix(1,0,0,1,137.028,83)">
<g class="circle" transform="matrix(1,0,0,1,-126.851,580.865)">
<g transform="matrix(1,0,0,1,-179,-8)">
<circle cx="512.5" cy="229.5" r="53.5" style="fill:rgb(187,205,255);"/>
<path d="(...)"/>
</g>
<g class="marker" transform="matrix(1.24299,0,0,1.24299,-303.533,-63.7664)">
<path d="(...)"/>
</g>
</g>
<g transform="matrix(1,0,0,1,-115,543.634)">
<text x="342px" y="229px" style="font-family:'LibreBaskerville-Regular', 'Libre Baskerville';font-size:47.751px;stroke:rgb(2,2,2);stroke-width:1px;">P<tspan x="381.968px 411.383px 449.775px 489.36px 528.517px 563.041px 591.883px 617.095px 650.712px " y="229px 229px 229px 229px 229px 229px 229px 229px 229px ">ropuestas</tspan></text>
</g>
<g transform="matrix(1,0,0,1,-133.134,566.723)">
<text x="344.149px" y="246px" style="font-family:'LibreBaskerville-Regular', 'Libre Baskerville';font-size:25.202px;stroke:rgb(2,2,2);stroke-width:1px;">Encuentr<tspan x="463.279px " y="246px ">o</tspan>s, taller<tspan x="571.371px " y="246px ">e</tspan>s, seminarios</text>
</g>
</g>
我的目標是節點內的圓圈以產生效果。
這是結果：
謝謝！
uj5u.com熱心網友回復：
我能想到的最好的辦法是用滑鼠事件觸發過濾器的影片。如上面評論中所述，您需要為每個目標定義一個單獨的過濾器。請注意始終使用唯一 ID。
“加速”效果是在將湍流饋送到置換貼圖之前“阻尼”湍流的 Alpha 通道的結果。Alpha 值與 0 和 1 之間的值相乘。該值被插值以從當前影片值變為 1 aftermouseover或 0 after mouseout。
訣竅是additive="sum"在mouseout影片中使用。它增加了上一個影片當前所在的值。如果兩個影片在短時間內觸發，它們可能會并行運行一段時間。在那段時間，“斜坡”停止，因為它們相互抵消，但它沒有跳躍。
為了節省所需的處理能力，湍流影片也僅在滑鼠懸停在觸發元素上時才處于活動狀態，并且在mouseout1 秒后停止。
該效果不是由滑鼠懸停在過濾元素本身上觸發的，而是由頂部的不可見元素觸發的。否則你會得到一些奇怪的效果，因為位移改變了滑鼠在元素上方的區域。
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<filter id="turbulence" filterUnits="objectBoundingBox"
x="-.5" y="-.5" width="2" height="2">
<feTurbulence numOctaves="2" seed="3" baseFrequency="0.02 0.05" result="rand">
<animate id="change" attributeName="baseFrequency"
begin="dot.mouseover" end="dot.mouseout 1s" dur="60s"
keyTimes="0;.125;.25;.375;.5;.625;.75;.875;1"
values="0.013,0.013;0.01,0.02;0.013,0.027;0.02,0.03;0.027,0.027;0.03,0.02;0.027,0.013;0.02,0.01;0.013,0.013"
repeatCount="indefinite"/>
</feTurbulence>
<feComponentTransfer>
<feFuncA type="linear" slope="0">
<animate attributeName="slope" begin="dot.mouseover" dur="1s"
keyTimes="0;1" values="0;1" fill="freeze" />
<animate attributeName="slope" begin="dot.mouseout" dur="1s"
keyTimes="0;1" values="0;-1" fill="freeze"
additive="sum" />
</feFuncA>
</feComponentTransfer>
<feDisplacementMap in="SourceGraphic" scale="20" />
<feOffset dx="-10" dy="-10" />
</filter>
<g style="filter:url(#turbulence)">
<circle r="60" cy="100" cx="100"
style="fill:rgb(255, 235, 187);stroke:#999;stroke-width:16" />
<circle r="60" cy="100" cx="100"
style="fill:none;stroke:#fff;stroke-width:8" />
</g>
<circle id="dot" r="70" cy="100" cx="100" style="opacity:0" />
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/516153.html