animate元素中的reference元素,element元素和animate元素在defs中反映在use元素中

时间:2018-02-08 20:10:25

标签: svg svg-animate

我正在研究svg动画,并且想知道是否有可能在animate元素中使用href属性,href的目标和它自己的animate元素在defs中......这是一个代码工作示例:< / p>

<svg viewBox="0 0 400 100">
    <defs>
        <rect id="anim-rect"
            x="-25" y="-25"
            width="50" height="50"
            fill="#29e" >
            <animate
                attributeName="fill"
                values="#29e; #4e4; #f40; #29e"
                dur="6s"
                repeatCount="indefinite" />
        </rect>
    </defs>

    <use xlink:href="#anim-rect" transform="translate(100 50)"/>
    <use xlink:href="#anim-rect" transform="translate(200 50)"/>
    <use xlink:href="#anim-rect" transform="translate(300 50)"/>
</svg>

这就是我想做的事情:

<svg viewBox="0 0 400 100">
    <defs>
        <rect id="anim-rect"
            x="-25" y="-25"
            width="50" height="50"
            fill="#29e" >
        </rect>
        <animate xlink:href="#anim-rect"
                attributeName="fill"
                values="#29e; #4e4; #f40; #29e"
                dur="6s"
                repeatCount="indefinite" />
    </defs>

    <use xlink:href="#anim-rect" transform="translate(100 50)"/>
    <use xlink:href="#anim-rect" transform="translate(200 50)"/>
    <use xlink:href="#anim-rect" transform="translate(300 50)"/>
</svg>

任何帮助将不胜感激。

0 个答案:

没有答案