SVG设置元素用法示例

set元素用于设置非数字属性或属性。

它将在某个时间将最初不可见的文本项设置为可见的文本项, 而无需” from”和” to”元素。

<set>元素仅需要”‘to”属性和适当的定时信息。

例子

<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>
<svg height="450" width="450">

<rect x="50" y="40" width="60" height="60"
 style="fill: purple; fill-opacity: .4; stroke: black;">
<animate attributeName="width" attributeType="XML"
 begin="0s" dur="4s" from="60" to="0" fill="freeze"/>
<animate attributeName="height" attributeType="XML"
 begin="0s" dur="4s" from="60" to="0" fill="freeze"/>
</rect>

<text text-anchor="middle" x="60" y="60" style="visibility: hidden;">
<set attributeName="visibility" attributeType="CSS"
 to="visible" begin="4.5s" dur="1s" fill="freeze"/>
 All gone!

</text>
</svg>
</body>
</html>

立即测试

例子

猜你喜欢