In the file from https://upload.wikimedia.org/wikipedia/commons/9/97/Moire_Lines.svg The animation rotates the lines with no issues in Chrome, Iron, Opera, Vivaldi browsers. It does not work in Firefox ver. 60.0.2 or Internet Explorer 11. It is understood that SMIL does not work in IE or Edge, but am hoping to find why it does not run in Firefox. I have reduced the lines of code below, but they still run the animation in browsers that support the animation. Are there any CSS alternatives that could be implemented?
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-2.4 -2.1 4.8 4.2" width="800" height="700">
<title>Line Moire</title>
<defs>
<path id="moire_arc_single" d="M 0,0 L 0,2 A 2,2 0 0,0 0.05235,1.99931 L -0.05235,-1.99931 A 2,2 0 0,1 0,-2 L 0,0" stroke="none" fill="black" />
<g id="moire_arc_group_a">
<use xlink:href="#moire_arc_single" transform="rotate( 0)" />
<use xlink:href="#moire_arc_single" transform="rotate( 3)" />
<use xlink:href="#moire_arc_single" transform="rotate( 6)" />
<use xlink:href="#moire_arc_single" transform="rotate( 9)" />
<use xlink:href="#moire_arc_single" transform="rotate( 12)" />
<use xlink:href="#moire_arc_single" transform="rotate( 15)" />
<use xlink:href="#moire_arc_single" transform="rotate( 18)" />
<use xlink:href="#moire_arc_single" transform="rotate( 21)" />
<use xlink:href="#moire_arc_single" transform="rotate( 24)" />
<use xlink:href="#moire_arc_single" transform="rotate( 27)" />
<use xlink:href="#moire_arc_single" transform="rotate( 30)" />
<use xlink:href="#moire_arc_single" transform="rotate( 33)" />
<use xlink:href="#moire_arc_single" transform="rotate( 36)" />
<use xlink:href="#moire_arc_single" transform="rotate( 39)" />
<use xlink:href="#moire_arc_single" transform="rotate( 42)" />
<use xlink:href="#moire_arc_single" transform="rotate( 45)" />
<animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="60s" repeatCount="indefinite"/>
</g>
<g id="moire_arc_group_b">
<use xlink:href="#moire_arc_single" transform="rotate( 0)" />
<use xlink:href="#moire_arc_single" transform="rotate( 3)" />
<use xlink:href="#moire_arc_single" transform="rotate( 6)" />
<use xlink:href="#moire_arc_single" transform="rotate( 9)" />
<use xlink:href="#moire_arc_single" transform="rotate( 12)" />
<use xlink:href="#moire_arc_single" transform="rotate( 15)" />
<use xlink:href="#moire_arc_single" transform="rotate( 18)" />
<use xlink:href="#moire_arc_single" transform="rotate( 21)" />
<use xlink:href="#moire_arc_single" transform="rotate( 24)" />
<use xlink:href="#moire_arc_single" transform="rotate( 27)" />
<use xlink:href="#moire_arc_single" transform="rotate( 30)" />
<use xlink:href="#moire_arc_single" transform="rotate( 33)" />
<use xlink:href="#moire_arc_single" transform="rotate( 36)" />
<use xlink:href="#moire_arc_single" transform="rotate( 39)" />
<use xlink:href="#moire_arc_single" transform="rotate( 42)" />
<use xlink:href="#moire_arc_single" transform="rotate( 45)" />
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="60s" repeatCount="indefinite"/>
</g>
</defs>
<use xlink:href="#moire_arc_group_a" transform="translate(0.2 0)" />
<use xlink:href="#moire_arc_group_b" transform="translate(-0.2 0)" />
</svg>
As Robert Longson said, Firefox does not implement cloning animations via <use> elements. is The obvious solution is to first clone and then animate. Note the use of additive="sum" here to make sure both the animated and the static transformation on the <g> element are applied.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-2.4 -2.1 4.8 4.2" width="800" height="700">
<title>Line Moire</title>
<defs>
<path id="moire_arc_single" d="M 0,0 L 0,2 A 2,2 0 0,0 0.05235,1.99931 L -0.05235,-1.99931 A 2,2 0 0,1 0,-2 L 0,0" stroke="none" fill="black" />
<g id="moire_arc_group">
<use xlink:href="#moire_arc_single" transform="rotate( 0)" />
<use xlink:href="#moire_arc_single" transform="rotate( 3)" />
<use xlink:href="#moire_arc_single" transform="rotate( 6)" />
<use xlink:href="#moire_arc_single" transform="rotate( 9)" />
<use xlink:href="#moire_arc_single" transform="rotate( 12)" />
<use xlink:href="#moire_arc_single" transform="rotate( 15)" />
<use xlink:href="#moire_arc_single" transform="rotate( 18)" />
<use xlink:href="#moire_arc_single" transform="rotate( 21)" />
<use xlink:href="#moire_arc_single" transform="rotate( 24)" />
<use xlink:href="#moire_arc_single" transform="rotate( 27)" />
<use xlink:href="#moire_arc_single" transform="rotate( 30)" />
<use xlink:href="#moire_arc_single" transform="rotate( 33)" />
<use xlink:href="#moire_arc_single" transform="rotate( 36)" />
<use xlink:href="#moire_arc_single" transform="rotate( 39)" />
<use xlink:href="#moire_arc_single" transform="rotate( 42)" />
</g>
</defs>
<g transform="translate(0.2 0)">
<use xlink:href="#moire_arc_group"/>
<use xlink:href="#moire_arc_group" transform="rotate(45)"/>
<use xlink:href="#moire_arc_group" transform="rotate(90)"/>
<use xlink:href="#moire_arc_group" transform="rotate(135)"/>
<animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="60s" repeatCount="indefinite" additive="sum" />
</g>
<g transform="translate(-0.2 0)">
<use xlink:href="#moire_arc_group"/>
<use xlink:href="#moire_arc_group" transform="rotate(45)"/>
<use xlink:href="#moire_arc_group" transform="rotate(90)"/>
<use xlink:href="#moire_arc_group" transform="rotate(135)"/>
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="60s" repeatCount="indefinite" additive="sum" />
</g>
</svg>