矩形离开鬼路径线

时间:2019-01-02 16:09:21

标签: jquery css svg

我的问题是当使用tweenMAX动画时,SVG的矩形元素之一留下了幻影线。当我隐藏矩形(id =“ rect8911-5-0”)时,该线消失了。

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

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

<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>

    <script>

    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
     })

</script>

0 个答案:

没有答案