SVG:在 animateTransform 中使用 "rotate"
SVG: using "rotate" in animateTransform
在 https://upload.wikimedia.org/wikipedia/commons/9/97/Moire_Lines.svg 的文件中
动画旋转线条在 Chrome、Iron、Opera、Vivaldi 浏览器中没有问题。它不适用于 Firefox 版本。 60.0.2 或 Internet Explorer 11。据了解,SMIL 在 IE 或 Edge 中不起作用,但我希望找到它在 Firefox 中不起作用的原因 运行。我减少了下面的代码行,但它们仍然 运行 支持动画的浏览器中的动画。是否有任何 CSS 可以实施的替代方案?
<?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>
正如 Robert Longson 所说,Firefox 不通过 <use>
元素实现克隆动画。很明显的解决方案是先克隆,然后再制作动画。请注意此处使用 additive="sum"
以确保应用 <g>
元素上的动画和静态转换。
<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>
在 https://upload.wikimedia.org/wikipedia/commons/9/97/Moire_Lines.svg 的文件中 动画旋转线条在 Chrome、Iron、Opera、Vivaldi 浏览器中没有问题。它不适用于 Firefox 版本。 60.0.2 或 Internet Explorer 11。据了解,SMIL 在 IE 或 Edge 中不起作用,但我希望找到它在 Firefox 中不起作用的原因 运行。我减少了下面的代码行,但它们仍然 运行 支持动画的浏览器中的动画。是否有任何 CSS 可以实施的替代方案?
<?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>
正如 Robert Longson 所说,Firefox 不通过 <use>
元素实现克隆动画。很明显的解决方案是先克隆,然后再制作动画。请注意此处使用 additive="sum"
以确保应用 <g>
元素上的动画和静态转换。
<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>