我正在SVG中制作一个动画雪花图案，它在Chrome/ium中运行良好，但在Firefox中，当你在图案区域内外移动鼠标时，该图案只会偶尔发生微小的移动，否则就不会移动。
潜在的问题似乎与本问题中的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>根据@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>