<path> 的 <use> 的 SVG 动画在 FireFox 中不起作用答案

【问题标题】：SVG Animation of <use> of <path> does not work in FireFox<path> 的 <use> 的 SVG 动画在 FireFox 中不起作用
【发布时间】：2021-04-07 02:17:59
【问题描述】：

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

根本问题似乎与 this question 中的 Firefox 错误相同，其中动画 <use> 元素不起作用。我的另一个问题是，我通过分别更改 x 和 y 的位置来为 <path> 元素的位置设置动画，以避免明显的循环运动，并且由于 <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>

【问题讨论】：

您是否尝试过跳过<use> 而只在路径上使用<animateTransform>？
有了<animateTransform>，我会让雪花形成一个明显的循环，我想这比在Firefox中完全不动画要好，而是通过动画x和y属性分开（持续时间不同，最小公倍数很大），那么重复周期会很长。
可以肯定的是，我再次尝试使用<animateTransform type=translate>，它坚持同时为x 和y 位置设置动画。如果我添加两个这样的变换，那么只有第二个是有效的。
...但是我可以构建两个嵌套的<g> 元素，底部有一个<use>，每个<g> 都有一个<animateTransform>，它可以沿着@987654345 进行翻译@ 或 y 轴。我将清理我的测试代码并稍后回答问题。谢谢@PaulLeBeau
additive="sum" 可能是您需要的。

标签： svg firefox svg-animate

【解决方案1】：

基于@PaulLeBeau 和@RobertLongson 的cmets，我制作了一个版本，其中有两个<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>

【讨论】：