svg - 'set' 元素 - 循环

Question

我有：

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

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

Answer 1

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

演示：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>​

Answer 2

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

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

<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>