jquery - 矩形离开鬼路径线

Question

我的问题是使用 tweenMAX 为 SVG 设置动画时，其中一个矩形元素会留下一条幽灵线。当我隐藏矩形 (id="rect8911-5-0") 时，这条线会消失。

我尝试将矩形的 HTML 与其他类似元素进行比较，它具有与其他元素相同的属性。

Jsfiddle - https://jsfiddle.net/AK_Concepts/n0sowm7j/104/#&togetherjs=US5GjOCGS6

        var tl = new TimelineMax();
        tl.from('#akEclipse', 0.5, {
        scaleY: 0,
        transformOrigin: "center",
        ease: Bounce.easeOut
          })
      
          .from('#layer1', 0.5, {
        scaleY: 0,
        transformOrigin: "bottom",
        ease: Bounce.easeOut
          })
    
        .from('#ak1', 0.7, {
        scaleX: 0,
        transformOrigin: "left",
        ease: Bounce.easeOut
          })
                .from('#ak2', 0.7, {
        scaleX: 0,
        transformOrigin: "right",
        ease: Bounce.easeOut
          })
              .from('#ak3', 0.7, {
        scaleX: 0,
        transformOrigin: "bottom",
        ease: Bounce.easeOut
         })
            .from('#ak4', 0.7, {
        scaleX: 0,
        transformOrigin: "right",
        ease: Bounce.easeOut
          })
              .from('#ak5', 0.7, {
        scaleX: 0,
        transformOrigin: "top",
        ease: Bounce.easeOut
          })
                .from('#ak6', 0.7, {
        scaleX: 0,
        transformOrigin: "bottom",
        ease: Bounce.easeOut
         })
           .from('#akWifiCircle', 0.6, {
        scaleY: 0,
        transformOrigin: "right",
        ease: Circ.easeOut,
        delay: 0.4
          })
          .from('#akWifi1', 0.5, {
        scale: 0
         })
          .from('#akWifi2', 0.5, {
        scale: 0
          })
          .staggerFrom('#akText', 0.5, {
        scaleX: 0
          }, -0.1)
    
          .from('#akLeftBracket', 0.5, {
        scaleY: 0,
        transformOrigin: "bottom",
        ease: Bounce.easeOut
          })
     
            .from('#akRightBracket', 0.7, {
        scaleX: 0,
        transformOrigin: "center",
        ease: Bounce.easeOut
         })

    <svg
       xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
       xmlns:dc="http://purl.org/dc/elements/1.1/"
       xmlns:cc="http://creativecommons.org/ns#"
       xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
       xmlns:svg="http://www.w3.org/2000/svg"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
       xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
       width="210mm"
       height="500"
       viewBox="0 0 210 297"
       version="1.1"
       id="akLayer"
       inkscape:version="0.92.3 (2405546, 2018-03-11)"
       sodipodi:docname="logo.svg">
      <defs
         id="defs2">
        <linearGradient
           id="linearGradient7405"
           osb:paint="solid">
          <stop
             style="stop-color:#000000;stop-opacity:1;"
             offset="0"
             id="stop7403" />
        </linearGradient>
        <linearGradient
           id="linearGradient7326">
          <stop
             style="stop-color:#000000;stop-opacity:1;"
             offset="0"
             id="stop7324" />
        </linearGradient>
      </defs>
      <sodipodi:namedview
         id="base"
         pagecolor="#ffffff"
         bordercolor="#666666"
         borderopacity="1.0"
         inkscape:pageopacity="0.0"
         inkscape:pageshadow="2"
         inkscape:zoom="0.7"
         inkscape:cx="352.68707"
         inkscape:cy="758.53834"
         inkscape:document-units="mm"
         inkscape:current-layer="layer1"
         showgrid="false"
         inkscape:window-width="1440"
         inkscape:window-height="837"
         inkscape:window-x="-8"
         inkscape:window-y="-8"
         inkscape:window-maximized="1" />
     
     
      <g
         inkscape:label="Layer 1"
         inkscape:groupmode="layer"
         id="layer1">
         
        <ellipse id="akEclipse"
           style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.44299996;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
           id="path4540"
           cx="98.047028"
           cy="62.125656"
           rx="55.965931"
           ry="53.698074" />
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:22.57777786px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#95a5a6;fill-opacity:1;stroke:none;stroke-width:0.26458332"
           x="68.644226"
           y="17.394018"
           id="akLeftBracket"
           transform="rotate(23.719593)"><tspan
             sodipodi:role="line"
             id="akLeftBracketInner"
             x="68.644226"
             y="17.394018"
             style="font-size:22.57777786px;fill:#95a5a6;fill-opacity:1;stroke-width:0.26458332">{</tspan></text>
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:22.57777786px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#95a5a6;fill-opacity:1;stroke:none;stroke-width:0.26458332"
           x="153.42914"
           y="30.020512"
           id="akRightBracket"
           transform="rotate(23.943111)"><tspan
             sodipodi:role="line"
             id="akRightBracketInner"
             x="153.42914"
             y="30.020512"
             style="fill:#95a5a6;fill-opacity:1;stroke-width:0.26458332">}</tspan></text>
        <g
           transform="matrix(0.61510677,0,0,0.61510677,59.392559,4.940452)"
           id="ak1">
          <path
             sodipodi:open="true"
             d="m 47.987231,56.095891 a 6.0295758,6.2189837 0 0 1 -8.181392,-2.406488 6.0295758,6.2189837 0 0 1 2.29575,-8.449315 6.0295758,6.2189837 0 0 1 8.202394,2.329194 6.0295758,6.2189837 0 0 1 -2.220714,8.470622"
             sodipodi:end="1.0471976"
             sodipodi:start="1.0654938"
             sodipodi:ry="6.2189837"
             sodipodi:rx="6.0295758"
             sodipodi:cy="50.654106"
             sodipodi:cx="45.068481"
             sodipodi:type="arc"
             id="path8203"
             style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#d45500;stroke-width:3.96733212;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
          <rect
             transform="matrix(0.3272053,-0.94495327,0.89597886,0.4440967,0,0)"
             y="56.808266"
             x="-72.065392"
             height="3.4850984"
             width="39.355797"
             id="rect8786"
             style="opacity:1;vector-effect:none;fill:#d45500;fill-opacity:1;fill-rule:evenodd;stroke-width:0.19001083;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
        </g>
        <g
           id="ak2"
           transform="matrix(0.61510677,0,0,0.61510677,59.495488,4.732088)">
          <path
             sodipodi:open="true"
             d="m 60.786895,93.118299 a 6.0295758,6.2189837 0 0 1 -8.181392,-2.406489 6.0295758,6.2189837 0 0 1 2.295749,-8.449314 6.0295758,6.2189837 0 0 1 8.202394,2.329193 6.0295758,6.2189837 0 0 1 -2.220713,8.470623"
             sodipodi:end="1.0471976"
             sodipodi:start="1.0654938"
             sodipodi:ry="6.2189837"
             sodipodi:rx="6.0295758"
             sodipodi:cy="87.676514"
             sodipodi:cx="57.868145"
             sodipodi:type="arc"
             id="path8203-0"
             style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#d45500;stroke-width:3.96733212;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
          <rect
             transform="matrix(0.31065414,0.95052302,-0.99956345,0.0295449,0,0)"
             y="-31.601654"
             x="58.573883"
             height="3.5532315"
             width="29.347023"
             id="rect8786-0"
             style="opacity:1;vector-effect:none;fill:#d45500;fill-opacity:1;fill-rule:evenodd;stroke-width:0.16567625;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
        </g>
        <g
           id="ak3"
           transform="matrix(0.61510677,0,0,0.61510677,61.365351,4.5294533)">
          <rect
             y="71.223206"
             x="25.702381"
             height="2.9598215"
             width="40.945999"
             id="rect8826"
             style="opacity:1;vector-effect:none;fill:#d45500;fill-opacity:1;fill-rule:evenodd;stroke-width:0.14384526;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
          <path
             sodipodi:open="true"
             d="m 22.762492,79.057584 a 6.0295758,6.2189837 0 0 1 -8.181392,-2.406489 6.0295758,6.2189837 0 0 1 2.295749,-8.449314 6.0295758,6.2189837 0 0 1 8.202394,2.329194 6.0295758,6.2189837 0 0 1 -2.220713,8.470622"
             sodipodi:end="1.0471976"
             sodipodi:start="1.0654938"
             sodipodi:ry="6.2189837"
             sodipodi:rx="6.0295758"
             sodipodi:cy="73.615799"
             sodipodi:cx="19.843742"
             sodipodi:type="arc"
             id="path8203-0-4"
             style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#d45500;stroke-width:3.96733212;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
        </g>
        <g
           transform="matrix(0.59058901,0,0,0.6441474,80.119478,1.9361278)"
           id="ak4">
          <path
             sodipodi:open="true"
             d="m 47.987231,56.095891 a 6.0295758,6.2189837 0 0 1 -8.181392,-2.406488 6.0295758,6.2189837 0 0 1 2.29575,-8.449315 6.0295758,6.2189837 0 0 1 8.202394,2.329194 6.0295758,6.2189837 0 0 1 -2.220714,8.470622"
             sodipodi:end="1.0471976"
             sodipodi:start="1.0654938"
             sodipodi:ry="6.2189837"
             sodipodi:rx="6.0295758"
             sodipodi:cy="50.654106"
             sodipodi:cx="45.068481"
             sodipodi:type="arc"
             id="path8203-8"
             style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#d45500;stroke-width:3.96733212;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
          <rect
             y="57.715511"
             x="42.938141"
             height="36.709896"
             width="3.8357444"
             id="rect8911"
             style="opacity:1;vector-effect:none;fill:#d45500;fill-opacity:1;fill-rule:evenodd;stroke:#d45500;stroke-width:0.30424747;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
        </g>
        <g
           transform="matrix(0.59058901,0,0,0.6441474,80.119478,1.9361278)"
           id="ak5">
          <path
             sodipodi:open="true"
             d="m 78.087283,56.874212 a 6.0295758,6.2189837 0 0 1 -8.181392,-2.406489 6.0295758,6.2189837 0 0 1 2.295749,-8.449315 6.0295758,6.2189837 0 0 1 8.202394,2.329194 6.0295758,6.2189837 0 0 1 -2.220713,8.470622"
             sodipodi:end="1.0471976"
             sodipodi:start="1.0654938"
             sodipodi:ry="6.2189837"
             sodipodi:rx="6.0295758"
             sodipodi:cy="51.432426"
             sodipodi:cx="75.168533"
             sodipodi:type="arc"
             id="path8203-0-4-1"
             style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#d45500;stroke-width:3.96733212;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
          <rect
             transform="matrix(-0.50469906,-0.86329535,0.81060501,-0.5855933,0,0)"
             y="1.0130322"
             x="-87.756302"
             height="33.224834"
             width="3.6235654"
             id="rect8911-5"
             style="opacity:1;vector-effect:none;fill:#d45500;fill-opacity:1;fill-rule:evenodd;stroke:#d45500;stroke-width:0.28132612;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
        </g>
        <g
           transform="matrix(0.17079731,0.61662248,-0.56535268,0.18628631,140.615,7.1715598)"
           id="ak6">
          <path
             sodipodi:open="true"
             d="m 78.087283,56.874212 a 6.0295758,6.2189837 0 0 1 -8.181392,-2.406489 6.0295758,6.2189837 0 0 1 2.295749,-8.449315 6.0295758,6.2189837 0 0 1 8.202394,2.329194 6.0295758,6.2189837 0 0 1 -2.220713,8.470622"
             sodipodi:end="1.0471976"
             sodipodi:start="1.0654938"
             sodipodi:ry="6.2189837"
             sodipodi:rx="6.0295758"
             sodipodi:cy="51.432426"
             sodipodi:cx="75.168533"
             sodipodi:type="arc"
             id="path8203-0-4-9"
             style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#d45500;stroke-width:3.96733212;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
          <rect
             transform="matrix(-0.50469906,-0.86329535,0.81060501,-0.5855933,0,0)"
             y="1.0130322"
             x="-87.756302"
             height="33.224834"
             width="3.6235654"
             id="rect8911-5-0"
             style="opacity:1;vector-effect:none;fill:#d45500;fill-opacity:1;fill-rule:evenodd;stroke:#d45500;stroke-width:0.28132612;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
        </g>
        <path
           style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:1.59401643;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
           id="akWifiCircle"
           sodipodi:type="arc"
           sodipodi:cx="51.659122"
           sodipodi:cy="105.81916"
           sodipodi:rx="2.4092913"
           sodipodi:ry="2.5133646"
           sodipodi:start="1.0654938"
           sodipodi:end="1.0471976"
           d="m 52.825393,108.01842 a 2.4092913,2.5133646 0 0 1 -3.269111,-0.97256 2.4092913,2.5133646 0 0 1 0.917333,-3.41474 2.4092913,2.5133646 0 0 1 3.277503,0.94133 2.4092913,2.5133646 0 0 1 -0.88735,3.42335"
           sodipodi:open="true"
           transform="matrix(0.94272689,-0.3335656,0.33048956,0.94380965,0,0)" />
        <path
           style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:3.2441051;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
           id="akWifi1"
           sodipodi:type="arc"
           sodipodi:cx="98.048416"
           sodipodi:cy="-84.819206"
           sodipodi:rx="11.96297"
           sodipodi:ry="13.441273"
           sodipodi:start="1.7216355"
           sodipodi:end="2.7332712"
           d="m 96.250767,-71.530555 a 11.96297,13.441273 0 0 1 -9.181828,-7.951534"
           sodipodi:open="true"
           transform="matrix(0.05440094,0.99851917,-0.98828885,0.15259472,0,0)" />
        <path
           style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:3.99166703;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
           id="akWifi2"
           sodipodi:type="arc"
           sodipodi:cx="106.80332"
           sodipodi:cy="-73.722664"
           sodipodi:rx="14.741567"
           sodipodi:ry="16.51409"
           sodipodi:start="1.7216355"
           sodipodi:end="3.0815188"
           d="M 104.58814,-57.396086 A 14.741567,16.51409 0 0 1 92.088347,-72.731195"
           transform="matrix(0.14908566,0.98882428,-0.95606906,0.29314153,0,0)"
           sodipodi:open="true" />
        <text
           xml:space="preserve"
           style="font-style:normal;font-weight:normal;font-size:22.57777786px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
           x="88.295242"
           y="85.636322"
           id="akText"><tspan
             sodipodi:role="line"
             id="tspan9312"
             x="88.295242"
             y="85.636322"
             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:19.75555611px;line-height:1;font-family:'Brush Script MT';-inkscape-font-specification:'Brush Script MT';fill:#19b5fe;fill-opacity:0.99607843;stroke:none;stroke-width:0.26458332;stroke-opacity:1">ncepts</tspan></text>
      </g>
    
    </svg>
    

标签： jquerycsssvg