社区首页 >问答首页 >SVG:在animateTransform中使用“旋转”

问SVG:在animateTransform中使用“旋转”
EN

Stack Overflow用户

提问于 2018-06-19 04:32:59

回答 1查看 679关注 0票数 4

在来自Lines.svg的文件中，动画在Chrome、Iron、Opera、Vivaldi浏览器中旋转行，没有任何问题。它在Firefox中不起作用。60.0.2或Internet 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>

svg

rotation

animatetransform

腾讯混元大模型产品特惠

由腾讯公司全链路自研，在高质量内容创作、数理逻辑、代码生成和多轮对话上性能表现卓越，业界领先水平。新用户19元起！

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-19 06:10:13

正如Robert所说，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>