'set'元素 - 循环

时间:2012-06-02 19:52:32

标签: svg smil

我有:

<set attributeName="visibility" attributeType="CSS" to="visible" begin="5s" fill="freeze"/>
<set attributeName="visibility" attributeType="CSS" to="hidden" begin="10s" fill="freeze"/>

我希望循环执行这些指令。

2 个答案:

答案 0 :(得分:5)

如果您希望项目持续“闪烁”打开和关闭,您需要将动画设置为具有持续时间,并在另一个结束时开始。例如:

演示:http://jsfiddle.net/rnSFY/

<svg xmlns="http://www.w3.org/2000/svg">
  <circle fill="red" cx="50%" cy="50%" r="30" stroke="black">
    <set id="show" attributeName="visibility" attributeType="CSS" to="visible"
         begin="0s; hide.end" dur="1s" fill="freeze"/>
    <set id="hide" attributeName="visibility" attributeType="CSS" to="hidden"
         begin="show.end" dur="1s" fill="freeze"/>
  </circle>
</svg>​

答案 1 :(得分:4)

您可以使用在隐藏和可见无限期间切换的单个set,而不是在两个不同的静态animate元素之间来回切换。

然后你也不必担心将开始时间与另一个命名动画的结束事件联系起来

&#13;
&#13;
<svg xmlns="http://www.w3.org/2000/svg">
  <circle fill="red" cx="50%" cy="50%" r="30" stroke="black">
    <animate attributeType="CSS"
             attributeName="visibility"
             from="visible" 
             to="hidden"
             dur="1s"
             repeatCount="indefinite"/>
  </circle>
</svg>
&#13;
&#13;
&#13;