Javascript 嗨，为什么能'；我不能让这个Svg在使用GSAP的代码笔上变形吗

正如标题所示，我无法使用gsap使Svg变形，
我已经包含了将所有形状转换为路径的脚本， 正如其他问题所述。我不熟悉Gsap代码&这是我第一次尝试它 在代码笔上。
html:

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 <<::...................::*/

window.addEventListener（“DOMContentLoaded”，（e）=>{
/*：：：：：：>>安装程序事件{
//这个.setTimeout（（），2000）；
动画_svg.play（）；
})
/*：：：：：>>事件Gsap设置GsapSetup……：：：>>普通动画Api……：：：>>普通动画Api……：：：：>>主DOMC evt的Gsap节Gsap节结束标记虽然您的代码有很多问题，但您要问的核心问题是，您正试图变形整个
元素您可以在开发工具的控制台中看到错误

变形svg变形
元素。因此，如果您想在SearchIcon和TablesVGicon svg之间变形，您需要找到一种方法将它们转换为单数路径。
Greensocks网站上的GSAP视频说，使用多个路径变形2个svg没有问题。可能是错误的，但我会仔细检查视频ag一分钟内..您可以同时设置多个路径的动画。但是您不能以SVG为目标并期望它知道如何设置动画。仅供参考，我为GreenSock工作。您可以将搜索图标的主要外部形状变形为平板电脑的主要外部形状，将每个路径的内部变形为彼此的内部形状，并且在额外的路径上不显示任何内容？或者将它们淡出…当然，可以至少，这是可行的。你需要告诉每一个片段它应该变形成什么（或者告诉它淡出）。
*{
 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);
    }

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 <<::...................::*/