SVG Animation of <use> of <path> does not work in FireFox

Question

I am making an animated snow-flakes pattern in SVG and it works nicely in Chrome/ium but in Firefox the pattern will only make the occasional tiny movement when you move the mouse in and out of the patterned area but otherwise doesn't move.

The underlying problem seems to be the same firefox bug as in this question where animating a <use> element doesn't work. My additional problem is that I am animating the position of a <path> element by changing its x and y position separately to avoid an obvious looping movement and since <path> elements don't have those attributes I need to reference them in a <use> element.

I'm hoping that I'm missing some completely obvious solution where the <path> gets embedded in some other element which has x and y attributes which I can animate and avoid the use of <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>

Answer 1

Based on comments by @PaulLeBeau and @RobertLongson I have made a version where there are two <animateTransform> tags attached to a <g> where the second one has addititve="sum". This <g> also contains the <path> to animate.

The two animations can have different durations to make for a long cycle and both can affect both x and y to make the illusion even more complete.

<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>