时间戳

首页 > 解决方案 > SVG 动画的在 FireFox 中不起作用

svg - SVG 动画的在 FireFox 中不起作用

问题描述

我在 SVG 中制作动画雪花图案，它在 Chrome/ium 中运行良好，但在 Firefox 中，当您将鼠标移入和移出图案区域时，该图案只会偶尔产生微小的移动，否则不会移动。

根本问题似乎与这个问题中的 Firefox 错误相同，其中动画<use>元素不起作用。我的另一个问题是，我<path>通过分别更改元素的位置x和y位置来为元素的位置设置动画，以避免明显的循环运动，并且由于<path>元素没有这些属性，因此我需要在<use>元素中引用它们。

我希望我错过了一些完全明显的解决方案，其中<path>嵌入在其他一些元素中，这些元素具有x我y可以制作动画并避免使用<use>.

<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="150px">
  <defs>
    <!-- two identical snow-flake paths but slightly different scaling and rotation -->
    <!-- could be two uses of the same path but the firefox animation bug is from use so that's probably not what we want -->
    <path
        id="snow-flake-1"
        fill="#fff" stroke="none"
        d="M183.3125,43.09375 L183.3125,83.8125 L152.71875,66.125 L137.1875,92.9375 L183.3125,119.65625 L183.3125,179.75 L131.5,149.8125 L131.40625,96.28125 L100.40625,96.34375 L100.46875,131.90625 L65.09375,111.46875 L49.59375,138.3125 L84.875,158.6875 L54.25,176.3125 L69.6875,203.1875 L115.90625,176.59375 L167.90625,206.625 L116.09375,236.53125 L69.6875,209.84375 L54.25,236.71875 L85.0625,254.46875 L49.6875,274.875 L65.1875,301.71875 L100.46875,281.34375 L100.40625,316.6875 L131.40625,316.75 L131.5,263.4375 L183.5,233.4375 L183.5,293.25 L137.1875,320.09375 L152.71875,346.90625 L183.5,329.09375 L183.5,369.9375 L214.5,369.9375 L214.5,329.21875 L245.09375,346.90625 L260.625,320.09375 L214.5,293.375 L214.5,233.28125 L266.3125,263.21875 L266.40625,316.75 L297.40625,316.6875 L297.34375,281.125 L332.71875,301.5625 L348.21875,274.71875 L312.9375,254.34375 L343.5625,236.71875 L328.125,209.84375 L281.9375,236.4375 L229.90625,206.40625 L281.75,176.46875 L328.125,203.1875 L343.5625,176.3125 L312.75,158.5625 L348.125,138.15625 L332.625,111.3125 L297.34375,131.6875 L297.40625,96.34375 L266.40625,96.28125 L266.3125,149.59375 L214.3125,179.59375 L214.3125,119.78125 L260.625,92.9375 L245.09375,66.125 L214.3125,83.9375 L214.3125,43.09375 L183.3125,43.09375 z"
        transform="scale(0.02) rotate(-15) translate(-202 -202)">
    </path>
    <path id="snow-flake-2"
          fill="#fff" stroke="none"
          d="M183.3125,43.09375 L183.3125,83.8125 L152.71875,66.125 L137.1875,92.9375 L183.3125,119.65625 L183.3125,179.75 L131.5,149.8125 L131.40625,96.28125 L100.40625,96.34375 L100.46875,131.90625 L65.09375,111.46875 L49.59375,138.3125 L84.875,158.6875 L54.25,176.3125 L69.6875,203.1875 L115.90625,176.59375 L167.90625,206.625 L116.09375,236.53125 L69.6875,209.84375 L54.25,236.71875 L85.0625,254.46875 L49.6875,274.875 L65.1875,301.71875 L100.46875,281.34375 L100.40625,316.6875 L131.40625,316.75 L131.5,263.4375 L183.5,233.4375 L183.5,293.25 L137.1875,320.09375 L152.71875,346.90625 L183.5,329.09375 L183.5,369.9375 L214.5,369.9375 L214.5,329.21875 L245.09375,346.90625 L260.625,320.09375 L214.5,293.375 L214.5,233.28125 L266.3125,263.21875 L266.40625,316.75 L297.40625,316.6875 L297.34375,281.125 L332.71875,301.5625 L348.21875,274.71875 L312.9375,254.34375 L343.5625,236.71875 L328.125,209.84375 L281.9375,236.4375 L229.90625,206.40625 L281.75,176.46875 L328.125,203.1875 L343.5625,176.3125 L312.75,158.5625 L348.125,138.15625 L332.625,111.3125 L297.34375,131.6875 L297.40625,96.34375 L266.40625,96.28125 L266.3125,149.59375 L214.3125,179.59375 L214.3125,119.78125 L260.625,92.9375 L245.09375,66.125 L214.3125,83.9375 L214.3125,43.09375 L183.3125,43.09375 z"
        transform="scale(0.027) rotate(15) translate(-202 -202)">
    </path>

    <!-- A couple of animated snow flakes. Animate x and y separately to avoid obvious cycles. -->
    <!-- Pick dur values with large smallest common multiple to make a long cycle. -->
    <pattern id="pt-snow-3" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <use x="5" y="5" href="#snow-flake-1">
        <animate attributeName="x" dur="4.2357s" repeatCount="indefinite" values="5; 5.7; 5; 3; 6.5; 5"/>
        <animate attributeName="y" dur="3.9s" repeatCount="indefinite" values="5; 3; 5.7; 5; 6.5; 5"/>
      </use>
      <use x="15" y="15" href="#snow-flake-2">
        <animate attributeName="x" dur="5.0s" repeatCount="indefinite" values="15; 13; 16.5; 15; 15.7; 15"/>
        <animate attributeName="y" dur="3.7357s" repeatCount="indefinite" values="15; 13; 16.5; 15; 15.7; 15"/>
      </use>
    </pattern>
  </defs>
  <g>
    <rect x="0" width="800" y="0" height="150" fill="#bbb"/>
    <rect x="0" width="800" y="0" height="150" fill="url(#pt-snow-3)" stroke="#888"/>
  </g>
</svg>

标签： svgfirefoxsvg-animate

解决方案

根据@PaulLeBeau 和@RobertLongson 的评论，我制作了一个版本，其中有两个<animateTransform>标签附加到<g>第二个标签的位置addititve="sum"。这<g>也包含<path>动画。

这两个动画可以有不同的持续时间以形成一个较长的周期，并且两者都可以影响两者x并使y错觉更加完整。

<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="150px">
  <defs>
    <path
        id="snow-flake"
        fill=#fff stroke="none"
        d="M183.3125,43.09375 L183.3125,83.8125 L152.71875,66.125 L137.1875,92.9375 L183.3125,119.65625 L183.3125,179.75 L131.5,149.8125 L131.40625,96.28125 L100.40625,96.34375 L100.46875,131.90625 L65.09375,111.46875 L49.59375,138.3125 L84.875,158.6875 L54.25,176.3125 L69.6875,203.1875 L115.90625,176.59375 L167.90625,206.625 L116.09375,236.53125 L69.6875,209.84375 L54.25,236.71875 L85.0625,254.46875 L49.6875,274.875 L65.1875,301.71875 L100.46875,281.34375 L100.40625,316.6875 L131.40625,316.75 L131.5,263.4375 L183.5,233.4375 L183.5,293.25 L137.1875,320.09375 L152.71875,346.90625 L183.5,329.09375 L183.5,369.9375 L214.5,369.9375 L214.5,329.21875 L245.09375,346.90625 L260.625,320.09375 L214.5,293.375 L214.5,233.28125 L266.3125,263.21875 L266.40625,316.75 L297.40625,316.6875 L297.34375,281.125 L332.71875,301.5625 L348.21875,274.71875 L312.9375,254.34375 L343.5625,236.71875 L328.125,209.84375 L281.9375,236.4375 L229.90625,206.40625 L281.75,176.46875 L328.125,203.1875 L343.5625,176.3125 L312.75,158.5625 L348.125,138.15625 L332.625,111.3125 L297.34375,131.6875 L297.40625,96.34375 L266.40625,96.28125 L266.3125,149.59375 L214.3125,179.59375 L214.3125,119.78125 L260.625,92.9375 L245.09375,66.125 L214.3125,83.9375 L214.3125,43.09375 L183.3125,43.09375 z"
        transform="translate(-202 -202)">
    </path>

    <!-- A couple of animated snow flakes. Each has two animation loops to avoid obvious cycles. -->
    <!-- Pick dur values with large smallest common multiple to make a long cycle. -->
    <pattern id="pt-snow-3" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <g>
        <use href="#snow-flake" transform="scale(0.02) rotate(-15)"/>
        <animateTransform dur="5.000s" values="5,5; 5.7,4.7; 5.4,5; 3.7,5.2; 6.2,4.7; 5,5" attributeName="transform" type="translate" repeatCount="indefinite"/>
        <animateTransform dur="4.789s" values="0,0; -1,3; -1,1; 0,-2; 2,-1; 0,0" additive="sum" attributeName="transform" type="translate" repeatCount="indefinite"/>
      </g>
      <g>
        <use href="#snow-flake" transform="scale(0.027) rotate(15)"/>
        <animateTransform dur="4.000s" values="15,14; 14.7,14; 15.2,14.1; 13,14; 15.5,14; 15,14" attributeName="transform" type="translate" repeatCount="indefinite"/>
        <animateTransform dur="5.789s" values="0,0; 0,-2; -1,1; -1,1; 1,-1; 0,0" additive="sum" attributeName="transform" type="translate" repeatCount="indefinite"/>
      </g>
    </pattern>
  </defs>
  <g>
    <rect x="0" width="500" y="0" height="150" fill="#bbb"/>
    <rect x="0" width="500" y="0" height="150" fill="url(#pt-snow-3)" stroke="#888"/>
  </g>
</svg>

推荐阅读