正如标题所示，我无法使用gsap使Svg变形，
我已经包含了将所有形状转换为路径的脚本，正如其他问题所述。我是Gsap代码的新手；这是我第一次搞清楚在代码笔上
html:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Calligraffitti&family=Special+Elite&display=swap" rel="stylesheet">
<section class="fuz"></section>
<div class="svg_underlay"></div>
<span class="server_span">Discord Server Link:</span><br>
<span class="server_span2">Discord Server Link:</span><br>
<span class="blurb">For Artist's & Coders.</span>
<a href="https://discord.gg/9NbYJSqfsy" class="server_link">discord.gg/9NbYJSqfsy</a>
<!-- ::>> ... <<:: -->
<!-- ::>> ...Notes::
-->
<svg id="SearchIcon" width='448px' height='448px' fill="url(#lin_grad1)"
viewBox="0 0 100 100" x="0px" y="0px" xml:space="preserve"
version="1.1" class="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
tabindex="3" aria-label="" contenteditable="true"
style=""> <!-- Linx 2 ::>> Search, Advanced Search, Seo,
Website Submissions, Asset Catalogue,
Website tree, Fractal library, Crates,
Random srch result -->
<title>Search icon</title>
<desc>Search icon</desc>
<defs>
<linearGradient id="lin_grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(0,255,127); stop-opacity:1" />
<!-- SpringGreen gradientTransform="rotate(33)" -->
<stop offset="54%" style="stop-color:rgb(0,128,255); stop-opacity:1" /> <!-- Dodger Blue -->
<stop offset="100%" style="stop-color:rgb(220,20,60); stop-opacity:1" /> <!-- Crimson -->
</linearGradient>
<radialGradient id="rad_grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(0,255,127); stop-opacity:1" /> <!-- SpringGreen -->
<stop offset="64%" style="stop-color:rgb(0,128,255); stop-opacity:1" /> <!-- Dodger Blue -->
<stop offset="78%" style="stop-color:rgb(220,20,60); stop-opacity:1" /> <!-- Crimson -->
<stop offset="84%" style="stop-color:rgb(0,255,127); stop-opacity:1" /> <!-- SpringGreen -->
<stop offset="92%" style="stop-color:rgb(0,128,255); stop-opacity:1" /> <!-- Dodger Blue -->
<stop offset="100%" style="stop-color:rgb(220,20,60); stop-opacity:1" /> <!-- Crimson -->
</radialGradient>
<style>
</style>
<filter id="dropshadow" height="188%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
<feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
<feComponentTransfer>
<feFuncA type="linear" slope="0.98"/> <!-- slope is the opacity of the shadow -->
</feComponentTransfer>
<feMerge>
<feMergeNode/> <!-- this contains the offset blurred image -->
<feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
</feMerge>
</filter>
</defs>
<metadata> <?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/"
x:xmptk="Adobe XMP Core 6.0-c002 79.164352, 2020/01/30-15:50:38">
</x:xmpmeta><?xpacket end="w"?>
</metadata>
<g>
<g>
<path id="One" style="filter:url(#dropshadow)" d="M45.33,30a1,1,0,0,0,0,2H61a1,1,0,0,0,1-1V15a1,1,0,0,0-1-1H41.957a20.9,20.9,0,0,0-2.7-4.288,1,1,0,1,0-1.547,
1.267,19.018,19.018,0,1,1-2.689-2.688,1,1,0,1,0,1.266-1.548A20.986,20.986,0,1,0,10,39.461V53H7.816a3,3,0,1,0,0,
2H11a1,1,0,0,0,1-1V40.854a20.842,20.842,0,0,0,5,2.262V56.184a3,3,0,1,0,2,0V43.607a20.864,20.864,0,0,0,3,
.342V48a1,1,0,0,0,1,1h8v2.184a3,3,0,1,0,2,0V48a1,1,0,0,0-1-1H24V43.949A20.876,20.876,0,0,0,34.744,40.4l3.172,
3.171a2.962,2.962,0,0,0,.578,3.407l9.35,9.349a1,1,0,0,0,1.414-1.414L46.98,52.636l5.656-5.657,7.071,7.072a1,1,
0,0,1,0,1.413l-4.242,4.243a1,1,0,0,1-1.415,0l-1.964-1.964a1,1,0,0,0-1.414,1.414l1.964,1.964a3,3,0,0,0,4.243,
0l4.242-4.242a3,3,0,0,0,0-4.243L46.979,38.494a3,3,0,0,0-3.405-.577L40.4,34.744A20.9,20.9,0,0,0,43.373,
28H57a1,1,0,0,0,1-1V19a1,1,0,0,0-1-1H43.381c-.167-.676-.357-1.345-.589-2H60V30ZM5,55a1,1,0,1,1,1-1A1,1,0,0,1,5,
55Zm13,5a1,1,0,1,1,1-1A1,1,0,0,1,18,60Zm14-5a1,1,0,1,1,1-1A1,1,0,0,1,32,55Zm13.566-3.778-1.415-1.415,5.656-5.656,
1.415,1.414Zm0-11.314,2.828,2.828-5.656,5.657-2.829-2.829a1,1,0,0,1,0-1.413l4.242-4.243A1,1,0,0,1,45.565,39.908ZM42.029,
39.2,39.2,42.029l-2.84-2.84a21.168,21.168,0,0,0,2.828-2.828ZM56,20v6H43.76q.142-.987.189-2H49a1,1,0,0,0,
0-2H43.957c-.033-.671-.095-1.338-.191-2Z">
</path>
<circle cx="53" cy="23" r="1"></circle>
<path id="Two" d="M23,40A17,17,0,1,0,6,23,16.828,16.828,0,0,0,9.581,33.414a1,1,0,0,0,1.58-1.227A14.846,14.846,0,0,1,8,23,15,15,0,1,1,23,
38a14.848,14.848,0,0,1-9.187-3.161,1,1,0,1,0-1.226,1.579A16.826,16.826,0,0,0,23,40Z">
</path>
<path id="Three" d="M33,18a1,1,0,0,0,0-2h-.343a12.573,12.573,0,0,1-8.95-3.707,1,1,0,0,0-1.414,0A12.573,12.573,0,0,1,13.343,
16H13a1,1,0,0,0-1,1v3.271a14.929,14.929,0,0,0,5.629,11.713l4.746,3.8a1,1,0,0,0,1.25,0l4.746-3.8a15.006,15.006,0,0,0,5.587-10.932,
1,1,0,1,0-2-.1,13,13,0,0,1-4.839,9.475L23,33.719l-4.121-3.3A12.939,12.939,0,0,1,14,20.271V17.986a14.539,14.539,0,0,0,9-3.616A14.55,
14.55,0,0,0,32.657,18Z">
</path>
<path id="Four" fill="" d="M27.293,20.293,23,24.586l-2.293-2.293a1,1,0,0,0-1.414,1.414l3,3a1,1,0,0,0,1.414,0l5-5a1,1,
0,0,0-1.414-1.414Z">
</path><!--
<text x="0" y="2" class="tool-tip" style="display:none;"
font-family="Verdana" font-size="32" text-anchor="middle">
Advanced Search
</text>-->
</g>
</g>
</svg>
<!-- ::>> Second Svg <<:: -->
<svg id="TabletSvgIcon" class="tab" width="228px" height="228px" fill="url(#lin_grad1)"
viewBox="0 0 97 97" x="0px" y="0px" xml:space="preserve"
version="1.1" class="disp_none"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
tabindex="2" aria-label="" contenteditable="true"
style="">
<defs>
<style> /* ::>> The graphics within the Tablet are set to Gold, As the Hue has been changed this reset's the inner Graphics back to gold.. */
.reverse_hue{
filter:hue-rotate(42deg);
}
</style>
<linearGradient id="lin_grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(0,255,127); stop-opacity:1" /> <!-- SpringGreen gradientTransform="rotate(33)" -->
<stop offset="54%" style="stop-color:rgb(0,128,255); stop-opacity:1" /> <!-- Dodger Blue -->
<stop offset="100%" style="stop-color:rgb(220,20,60); stop-opacity:1" /> <!-- Crimson -->
</linearGradient>
<radialGradient id="rad_grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(0,255,127); stop-opacity:1" /> <!-- SpringGreen -->
<stop offset="64%" style="stop-color:rgb(0,128,255); stop-opacity:1" /> <!-- Dodger Blue -->
<stop offset="78%" style="stop-color:rgb(220,20,60); stop-opacity:1" /> <!-- Crimson -->
<stop offset="84%" style="stop-color:rgb(0,255,127); stop-opacity:1" /> <!-- SpringGreen -->
<stop offset="92%" style="stop-color:rgb(0,128,255); stop-opacity:1" /> <!-- Dodger Blue -->
<stop offset="100%" style="stop-color:rgb(220,20,60); stop-opacity:1" /> <!-- Crimson -->
</radialGradient>
</defs>
<g>
<path id="A" fill="none" d="M45.939,8.364h6.934c0.578,0,1.047-0.471,1.047-1.049c0-0.577-0.469-1.048-1.047-1.048h-6.934 c-0.578,
0-1.048,0.471-1.048,1.048C44.892,7.894,45.361,8.364,45.939,8.364z"/>
<path id="B" fill="none" d="M36.847,17.227c-2.88,0-5.216,2.336-5.216,5.216h5.216V17.227z"/>
<circle fill="none" cx="49.405" cy="91.678" r="2.998"/>
<path id="C" fill="none" d="M27.567,85.607h43.675V11.886H27.567V85.607z M31.675,63.197c-0.241,0-0.437-0.196-0.437-0.438v-4.912 c0-0.241,0.196-0.438,0.437-0.438h1.75c0.241,
0,0.436,0.196,0.436,0.438v4.912c0,0.241-0.195,0.438-0.436,0.438H31.675z M37.23,78.926v1.432h-1.375v-1.32c-0.931-0.041-1.833-0.307-2.362-0.598l0.417-1.625c0.583,
0.318,1.403,0.611,2.305,0.611 c0.808,0,1.35-0.32,1.35-0.861c0-0.529-0.444-0.863-1.486-1.209c-1.488-0.5-2.502-1.196-2.502-2.544 c0-1.235,0.863-2.196,
2.349-2.473v-1.32h1.362v1.223c0.916,0.026,1.542,0.236,2.028,0.459l-0.416,1.569 c-0.348-0.166-1-0.486-2.002-0.486c-0.903,0-1.195,0.402-1.195,0.793c0,0.443,
0.487,0.75,1.683,1.18 c1.652,0.585,2.306,1.35,2.306,2.612C39.69,77.605,38.829,78.661,37.23,78.926z M35.712,62.76v-7.688 c0-0.242,0.196-0.438,0.438-0.438h1.749c0.241,
0,0.437,0.195,0.437,0.438v7.688c0,0.241-0.196,0.438-0.437,0.438H36.15 C35.908,63.197,35.712,63.001,35.712,62.76z M42.81,62.76c0,0.241-0.196,0.438-0.437,
0.438h-1.75c-0.242,0-0.438-0.196-0.438-0.438 V52.295c0-0.241,0.196-0.438,0.438-0.438h1.75c0.24,0,0.437,0.196,0.437,0.438V62.76z M47.668,16.518h19.363 c0.539,0,
0.975,0.436,0.975,0.975c0,0.538-0.436,0.975-0.975,0.975H47.668c-0.538,0-0.975-0.437-0.975-0.975 C46.694,16.953,47.13,16.518,47.668,16.518z M47.668,
21.467h19.363c0.539,0,0.975,0.437,0.975,0.975 c0,0.539-0.436,0.975-0.975,0.975H47.668c-0.538,0-0.975-0.436-0.975-0.975C46.694,21.903,47.13,21.467,
47.668,21.467z M47.668,26.416h19.363c0.539,0,0.975,0.438,0.975,0.975c0,0.539-0.436,0.976-0.975,0.976H47.668c-0.538,0-0.975-0.437-0.975-0.976 C46.694,
26.854,47.13,26.416,47.668,26.416z M47.668,34.111h19.363c0.539,0,0.975,0.437,0.975,0.975 c0,0.539-0.436,0.975-0.975,0.975H47.668c-0.538,0-0.975-0.436-0.975-0.975C46.694,
34.548,47.13,34.111,47.668,34.111z M47.668,39.061h19.363c0.539,0,0.975,0.438,0.975,0.975c0,0.539-0.436,0.976-0.975,0.976H47.668c-0.538,0-0.975-0.437-0.975-0.976 C46.694,
39.498,47.13,39.061,47.668,39.061z M47.668,44.011h19.363c0.539,0,0.975,0.437,0.975,0.975s-0.436,0.976-0.975,0.976 H47.668c-0.538,
0-0.975-0.438-0.975-0.976S47.13,44.011,47.668,44.011z M47.668,51.43h19.363c0.539,0,0.975,0.436,0.975,0.975 c0,0.538-0.436,0.975-0.975,
0.975H47.668c-0.538,0-0.975-0.437-0.975-0.975C46.694,51.865,47.13,51.43,47.668,51.43z M47.668,56.379h19.363c0.539,0,0.975,0.437,0.975,
0.975c0,0.539-0.436,0.975-0.975,0.975H47.668c-0.538,0-0.975-0.436-0.975-0.975 C46.694,56.815,47.13,56.379,47.668,56.379z M47.668,61.328h19.363c0.539,0,0.975,
0.438,0.975,0.975 c0,0.539-0.436,0.976-0.975,0.976H47.668c-0.538,0-0.975-0.437-0.975-0.976C46.694,61.766,47.13,61.328,47.668,61.328z M47.668,
69.23h19.363c0.539,0,0.975,0.438,0.975,0.975c0,0.539-0.436,0.976-0.975,0.976H47.668c-0.538,0-0.975-0.437-0.975-0.976 C46.694,69.668,47.13,
69.23,47.668,69.23z M47.668,74.181h19.363c0.539,0,0.975,0.437,0.975,0.975s-0.436,0.976-0.975,0.976H47.668 c-0.538,0-0.975-0.438-0.975-0.976S47.13,
74.181,47.668,74.181z M47.668,79.131h19.363c0.539,0,0.975,0.436,0.975,0.975 c0,0.538-0.436,0.975-0.975,0.975H47.668c-0.538,0-0.975-0.437-0.975-0.975C46.694,
79.566,47.13,79.131,47.668,79.131z M36.847,16.772c3.131,0,5.67,2.539,5.67,5.67c0,3.132-2.539,5.671-5.67,5.671c-3.131,0-5.67-2.539-5.67-5.671 C31.177,
19.312,33.716,16.772,36.847,16.772z M31.939,41.819c0.126,0,0.242,0.034,0.355,0.071l1.601-1.6 c-0.038-0.113-0.072-0.229-0.072-0.355c0-0.626,0.508-1.133,
1.134-1.133c0.626,0,1.134,0.507,1.134,1.133 c0,0.01-0.005,0.019-0.006,0.028l2.001,1.051c0.187-0.134,0.402-0.229,0.648-0.229c0.126,0,0.242,0.034,0.355,
0.071l1.6-1.6 c-0.038-0.113-0.072-0.229-0.072-0.355c0-0.626,0.509-1.134,1.134-1.134c0.627,0,1.133,0.508,1.133,1.134 c0,0.627-0.506,1.134-1.133,1.134c-0.126,
0-0.242-0.034-0.355-0.071l-1.601,1.6c0.038,0.113,0.072,0.229,0.072,0.355 c0,0.626-0.507,1.133-1.134,1.133c-0.625,0-1.134-0.507-1.134-1.133c0-0.01,0.005-0.019,0.006-0.028l-2.002-1.052
c-0.186,0.134-0.401,0.229-0.647,0.229c-0.125,0-0.241-0.034-0.354-0.071l-1.601,1.601c0.038,0.113,0.072,0.229,0.072,0.354 c0,0.627-0.508,1.135-1.135,1.135c-0.626,0-1.133-0.508-1.133-1.135C30.807,
42.326,31.313,41.819,31.939,41.819z"/>
<path id="D" fill="url(#lin_grad1)" d="M70.121,2.747h-41.43c-3.724,0-6.74,3.018-6.74,6.74v81.52c0,3.724,3.017,6.738,6.74,6.738h41.43 c3.723,0,6.74-3.017,6.74-6.738V9.487C76.861,
5.766,73.844,2.747,70.121,2.747z M45.939,6.268h6.934 c0.578,0,1.047,0.471,1.047,1.048c0,0.578-0.469,1.049-1.047,1.049h-6.934c-0.578,0-1.048-0.471-1.048-1.049
C44.892,6.738,45.361,6.268,45.939,6.268z M49.405,94.676c-1.655,0-2.999-1.345-2.999-3c0-1.654,1.344-2.996,2.999-2.996 s3.001,1.342,3.001,2.996C52.406,93.331,
51.061,94.676,49.405,94.676z M71.242,85.607H27.567V11.886h43.675V85.607z"/>
<path id="F" fill="gold" class="reverse_hue" d="M36.847,28.113c3.131,0,5.67-2.539,5.67-5.671c0-3.131-2.539-5.67-5.67-5.67c-3.131,0-5.67,2.539-5.67,5.67 C31.177,25.574,33.716,28.113,36.847,28.113z M36.847,
17.227v5.216h-5.216C31.631,19.563,33.967,17.227,36.847,17.227z"/>
<path id="G" fill="url(#lin_grad1)" d="M47.668,18.467h19.363c0.539,0,0.975-0.437,0.975-0.975c0-0.539-0.436-0.975-0.975-0.975H47.668 c-0.538,0-0.975,0.436-0.975,0.975C46.694,18.03,47.13,18.467,47.668,18.467z"/>
<path fill="url(#lin_grad1)" d="M47.668,23.416h19.363c0.539,0,0.975-0.436,0.975-0.975c0-0.538-0.436-0.975-0.975-0.975H47.668 c-0.538,0-0.975,0.437-0.975,0.975C46.694,22.98,47.13,23.416,47.668,23.416z"/>
<path fill="url(#lin_grad1)" d="M47.668,28.366h19.363c0.539,0,0.975-0.437,0.975-0.976c0-0.537-0.436-0.975-0.975-0.975H47.668 c-0.538,0-0.975,0.438-0.975,0.975C46.694,27.93,47.13,28.366,47.668,28.366z"/>
<path fill="gold" class="reverse_hue" d="M31.939,44.087c0.627,0,1.135-0.508,1.135-1.135c0-0.126-0.034-0.241-0.072-0.354l1.601-1.601 c0.113,0.037,0.229,0.071,0.354,0.071c0.246,0,0.462-0.095,0.647-0.229l2.002,1.052c0,
0.01-0.006,0.019-0.006,0.028 c0,0.626,0.509,1.133,1.134,1.133c0.626,0,1.134-0.507,1.134-1.133c0-0.126-0.034-0.242-0.072-0.355l1.601-1.6 c0.113,0.037,0.229,0.071,0.355,
0.071c0.627,0,1.133-0.507,1.133-1.134c0-0.626-0.506-1.134-1.133-1.134 c-0.625,0-1.134,0.508-1.134,1.134c0,0.126,0.034,0.242,0.072,0.355l-1.6,
1.6c-0.113-0.037-0.229-0.071-0.355-0.071 c-0.246,0-0.462,0.095-0.648,0.229l-2.001-1.051c0-0.01,0.006-0.019,0.006-0.028c0-0.626-0.507-1.133-1.134-1.133 c-0.626,
0-1.134,0.507-1.134,1.133c0,0.126,0.034,0.242,0.072,0.355l-1.601,1.6c-0.113-0.037-0.229-0.071-0.355-0.071 c-0.626,0-1.133,0.507-1.133,1.133C30.807,43.579,31.313,44.087,31.939,44.087z"/>
<path fill="url(#lin_grad1)" d="M47.668,36.061h19.363c0.539,0,0.975-0.436,0.975-0.975c0-0.538-0.436-0.975-0.975-0.975H47.668 c-0.538,0-0.975,0.437-0.975,0.975C46.694,35.625,47.13,36.061,47.668,36.061z"/>
<path fill="url(#lin_grad1)" d="M47.668,41.011h19.363c0.539,0,0.975-0.437,0.975-0.976c0-0.537-0.436-0.975-0.975-0.975H47.668 c-0.538,0-0.975,0.438-0.975,0.975C46.694,40.574,47.13,41.011,47.668,41.011z"/>
<path fill="url(#lin_grad1)" d="M47.668,45.961h19.363c0.539,0,0.975-0.438,0.975-0.976s-0.436-0.975-0.975-0.975H47.668 c-0.538,0-0.975,0.437-0.975,0.975S47.13,45.961,47.668,45.961z"/>
<path fill="gold" class="reverse_hue" d="M33.861,62.76v-4.912c0-0.241-0.195-0.438-0.436-0.438h-1.75c-0.241,0-0.437,0.196-0.437,0.438v4.912 c0,0.241,0.196,0.438,0.437,0.438h1.75C33.666,63.197,33.861,63.001,33.861,62.76z"/>
<path fill="gold" d="M37.898,63.197c0.241,0,0.437-0.196,0.437-0.438v-7.688c0-0.242-0.196-0.438-0.437-0.438H36.15 c-0.242,0-0.438,0.195-0.438,0.438v7.688c0,0.241,0.196,0.438,0.438,0.438H37.898z"/>
<path fill="gold" class="reverse_hue" d="M42.374,51.857h-1.75c-0.242,0-0.438,0.196-0.438,0.438V62.76c0,0.241,0.196,0.438,0.438,0.438h1.75 c0.24,0,0.437-0.196,0.437-0.438V52.295C42.81,52.054,42.614,51.857,42.374,51.857z"/>
<path fill="url(#lin_grad1)" d="M47.668,53.379h19.363c0.539,0,0.975-0.437,0.975-0.975c0-0.539-0.436-0.975-0.975-0.975H47.668 c-0.538,0-0.975,0.436-0.975,0.975C46.694,52.942,47.13,53.379,47.668,53.379z"/>
<path fill="url(#lin_grad1)" d="M47.668,58.328h19.363c0.539,0,0.975-0.436,0.975-0.975c0-0.538-0.436-0.975-0.975-0.975H47.668 c-0.538,0-0.975,0.437-0.975,0.975C46.694,57.893,47.13,58.328,47.668,58.328z"/>
<path fill="url(#lin_grad1)" d="M47.668,63.278h19.363c0.539,0,0.975-0.437,0.975-0.976c0-0.537-0.436-0.975-0.975-0.975H47.668 c-0.538,0-0.975,0.438-0.975,0.975C46.694,62.842,47.13,63.278,47.668,63.278z"/>
<path fill="url(#lin_grad1)" d="M47.668,71.181h19.363c0.539,0,0.975-0.437,0.975-0.976c0-0.537-0.436-0.975-0.975-0.975H47.668 c-0.538,0-0.975,0.438-0.975,0.975C46.694,70.744,47.13,71.181,47.668,71.181z"/>
<path fill="url(#lin_grad1)" d="M47.668,76.131h19.363c0.539,0,0.975-0.438,0.975-0.976s-0.436-0.975-0.975-0.975H47.668 c-0.538,0-0.975,0.437-0.975,0.975S47.13,76.131,47.668,76.131z"/>
<path fill="url(#lin_grad1)" d="M47.668,81.08h19.363c0.539,0,0.975-0.437,0.975-0.975c0-0.539-0.436-0.975-0.975-0.975H47.668 c-0.538,0-0.975,0.436-0.975,0.975C46.694,80.644,47.13,81.08,47.668,81.08z"/>
<path fill="gold" class="reverse_hue" d="M37.384,73.756c-1.196-0.43-1.683-0.736-1.683-1.18c0-0.391,0.292-0.793,1.195-0.793c1.001,0,1.654,0.32,2.002,0.486 l0.416-1.569c-0.485-0.223-1.112-0.433-2.028-0.459v-1.223h-1.362v1.32c-1.486,
0.276-2.349,1.237-2.349,2.473 c0,1.348,1.014,2.044,2.502,2.544c1.042,0.346,1.486,0.68,1.486,1.209c0,0.541-0.542,0.861-1.35,0.861 c-0.902,0-1.722-0.293-2.305-0.611l-0.417,
1.625c0.529,0.291,1.431,0.557,2.362,0.598v1.32h1.375v-1.432 c1.599-0.265,2.46-1.32,2.46-2.558C39.69,75.105,39.036,74.341,37.384,73.756z"/>
</g>
</svg>
<!-- ::>> ... <<:: -->
<!-- ::>> ...Notes::
-->
css
*{
margin:0;padding:0;
text-decoration:none;
box-sizing:border-box;
}
body{
display:block;
width:100vw; height:calc(1440px + 28vh);
min-width:100%; min-height:auto;
background:linear-gradient(-33deg,#1f2026,#2c2c2d);
background-repeat:no-repeat;
overflow-x:hidden;
z-index:1;
}
svg defs{
/* display:none;*/
}
.fuz{
position:absolute;
top:0; left:0;
background:linear-gradient(-27deg,#2c2c2d,#1f2026);
filter:opacity(0.8);
z-index:2;
}
.svg_underlay{
position:absolute;
top:58%; left:50%;
transform:translate(-54%,-50%);
width:528px; height:528px;
border-radius:18px;
background:linear-gradient(-27deg,crimson,#2c2c2d,#1f2026);
filter:opacity(0.48);
border:solid 18px #1f2026;
z-index:3;
}
.server_span{
position:absolute;
top:2vh; left:50%;
transform:translateX(-50%);
font-size:calc(18.4px + 2.225vw);
font-family: 'Special Elite', cursive;
white-space:no-wrap;
filter:blur(0.52px);
background:linear-gradient(90deg, crimson,springgreen,blue);
background-clip:text;
color:transparent;
/* text-shadow:2px 2px 2px black; */
z-index:5;
}
.server_span2{
position:absolute;
top:calc(8px + 2.24vh); left:49.2%;
font-family: 'Special Elite', cursive;
transform:translateX(-50%);
font-size:calc(19.4px + 2.225vw);
white-space:no-wrap;
filter:blur(0.52px);
background:linear-gradient(90deg, black,grey,black);
background-clip:text;
color:transparent;
/* text-shadow:2px 2px 2px black; */
z-index:4;
}
.blurb{
position:absolute;
top:calc(48px + 2.24vh); left:49.2%;
font-family: 'Special Elite', cursive;
transform:translateX(-50%);
font-size:calc(18.4px + 2.025vw);
white-space:no-wrap;
filter:blur(0.52px);
background:linear-gradient(90deg,gold,red,orange,yellow);
background-clip:text;
color:transparent;
/* text-shadow:2px 2px 2px black; */
z-index:4;
}
.server_link{
position:absolute;
top:calc(4.88vh + 408.8px); left:50%;
font-family: 'Calligraffitti', cursive;
transform:translateX(-50%);
font-size:calc(34.8px + 0.288vw);
white-space:no-wrap;
filter:blur(0.52px);
background:linear-gradient(90deg, crimson,springgreen,blue,crimson);
background-clip:text;
color:transparent;
/* text-shadow:2px 2px 2px black; */
z-index:4;
}
.svg1{
display:block;
position:absolute;
top:64%; left:52%;
filter:blur(0.488px) hue-rotate(-42deg);
transform:translate(-50%,-50%);
z-index:3;
}
.svg1:hover{
cursor:pointer;
}
.tab{
position:absolute;
left:50%; top:58%;
transform:translate(-50%,-50%);
visibility:hidden;
filter:blur(0.51px);
}
javascript
window.addEventListener("DOMContentLoaded",(e)=>{
/* ::..............::>> Setup <<::.............:: */
const Bodi = document.getElementsByTagName("body");
let fuz = document.querySelector(".fuz");
let svg1 = document.querySelector(".svg1");
let svg2 = document.querySelector(".svg2");
let txt1 = document.querySelector(".server_span");
let txt2 = document.querySelector(".server_span2");
let blurb = document.querySelector(".blurb");
/* ::..............::>> Setup <<::.............:: */
/* ::..............::>> Events <<::.............:: */
svg1.addEventListener("mouseenter",(e)=>{
anime_svg.pause();
})
svg1.addEventListener("mouseleave",(e)=>{
// this.setTimeout((), 2000);
anime_svg.play();
})
/* ::..............::>> Events <<::.............:: */
/* ::..............::>> Gsap Setup <<::.............:: */
gsap.defaults({ease: "power2.inOut"});
let tl = gsap.timeline({ repeat: -1, delay:0.5,
repeatDelay:0.5, id:"morphing",
paused:true, defaults: {duration: 1}
})
GSDevTools.create({animation:tl, globalSync:false, paused:true});
MorphSVGPlugin.convertToPath("circle, polygon");
gsap.to("#SearchIcon", {duration: 80, morphSVG:"#TabletSvgIcon"});
/* ::..............::>> GsapSetup <<::..............................:: */
/* ::>> ...........::>> Normal Anime Api <<::.......................:: */
let anime_svg = svg1.animate({
transform: ["scale(1) translate(-50%,-42%) rotateZ(0deg)",
"scale(1.0742) translate(-44%,-38%) rotateZ(2.8deg)"],
filter: ["hue-rotate(-42deg) blur(0.77px)","hue-rotate(-488deg) blur(0.42px)"]
},{
iterations: Infinity,
direction: 'alternate',
ease: 'cubic-bezier(.82,.23,.62,.87)',
duration: 888,
delay: 488
});
let fuzzy = fuz.animate({
background: ["linear-gradient(-33deg,red,blue,green)",
"linear-gradient(-188deg,grey,black,red)"]
},{
duration:14,
iterations:Infinity,
direction: 'alternate'
});
/* ::>> ...........::>> Normal Anime Api <<::.......................:: */
// ::>> ...........::>> Gsap Section <<::..........................................<<::
// !!::>> Gsap Junk Code ....... <<::
// let tl = new TimeLineMax({repeat:-1,repeatDelay:0.4, yoyo:true})
/*
MorphSVGPlugin.convertToPath("circle, polygon")
tl.to("#One" ,0.8, {morphSVG:"#A"})
.to("#Two" ,0.8, {morphSVG:"#B"})
.to("#Three" ,0.8, {morphSVG:"#C"})
.to("#Four" ,0.8, {morphSVG:"#D"})
.to("Five" ,0.8, {morphSVG:"#E"})
.to("#Six" ,0.8, {morphSVG:"#F"})
.to("#Seven" ,0.8, {morphSVG:"#G"}) */
//gsap.to("#SearchIcon", {duration: 80, morphSVG:"#TabletSvgIcon"});
//MorphSVGPlugin.();
// !!::>> Gsap Junk Code ....... <<::
// ::>> ...........::>> Gsap Section <<::..........................................<<::
}); /* ::..................::>> Closing Tag for the Main DOMC evt <<::...................::*/
/* ::..................::>> Closing Tag for the Main DOMC evt <<::...................::*/
console.log(`::>> ScriptEnded`);
/* ::..................::>> Closing Tag for the Main DOMC evt <<::...................::*/
我的普通动画是否阻止了GSAP代码
在此处打开代码示例：https://codepen.io/MistaKisthur/pen/dyXwaQZ
希望它在悬停时变形为平板电脑Svg。。。
虽然您的代码有很多问题，但您询问的核心问题是因为您试图变形整个<svg>元素。您可以在开发人员工具的控制台中看到错误。
MorphSVG对<path>元素进行变形。因此，如果你想在SearchIcon和TabletSvgIcon SVG之间变形，你需要想办法将它们转换为单一路径。