Question

我复制并调整了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>

TweenMax动画只能在Chrome中使用，而不能在Firefox中使用

0 个答案: