我的问题是当使用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>