我复制并调整了https://codepen.io/ARS/pen/pjypwd,创建了自己的svg文件以使效果生效。在Chrome上运行良好,而不在Firefox上运行。
我读到它可能与Chrome和Firefox无关,但我认为情况并非如此
JS: CSSPlugin.useSVGTransformAttr = true;
var nametl = new TimelineMax({repeat: 2, repeatDelay: 0.5, yoyo: true}),
path = 'svg *',
stagger_val = 0.0125,
duration = 2;
var stagger_opts_to = {
x: 0,
y: -100,
opacity: 1,
scale: 1,
rotation: 0,
ease: Power4.easeInOut
};
function rndm(min, max) {
return Math.random() * (max - min) + min;
}
$.each($(path), function(i, el) {
nametl.set($(this), {
x: '+=' + rndm(-500, 500),
y: '+=' + rndm(-500, 500),
scale: 0,
opacity: 1
});
});
nametl.staggerTo(path, duration, stagger_opts_to, stagger_val);
HTML:
<div class="name">
<figure>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg 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="600mm" height="100mm" viewBox="0 0 600 100"
version="1.1" id="svg8" inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="bahnnameplain2.svg">
<defs id="defs2" />
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0"
inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.5" inkscape:cx="1128.791"
inkscape:cy="327.99504" inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false"
inkscape:window-width="1920" inkscape:window-height="1027" inkscape:window-x="-8" inkscape:window-y="59"
inkscape:window-maximized="1" units="mm" />
<metadata id="metadata5">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(0,-197)">
<path
style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 50.852073,216.76453 2.834822,7.08809 5.005173,2.74033 2.07887,-9.82842 z" id="path1458"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 50.852073,216.76453 v 15.40357 0 l 2.834822,-8.31548 z" id="path1456"
inkscape:connector-curvature="0" />
<path
style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 60.770938,216.76453 -2.078869,9.82842 3.554788,5.66964 v -15.49806 z" id="path1454"
inkscape:connector-curvature="0" />
.
.
.
</g>
</svg>
</figure>