个性化阅读
专注于IT技术分析

SVG animateTransform元素示例

<animateTransform>元素用于沿直线路径对对象进行动画处理。

<animateTransform>元素可用于旋转, 平移, 缩放或倾斜转换。

如果要旋转形状, 则必须将attributeName设置为transform。并输入为旋转。

例子

<!DOCTYPE html>
<html>
<title>SVG Animation</title>
<body>

<h1>SVG Image</h1>
<svg xmlns="http://www.srcmini.org/2000/svg"
 xmlns:xlink="http://www.srcmini.org/1999/xlink">

<rect x="10" y="10" height="100" width="100"
    style="stroke:black; fill: purple; stroke-width: 2 ">

<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite"
   begin="0s" dur="10s" from="0 60 60 " to="360 60 60" />
</rect>

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

立即测试

赞(0) 打赏
未经允许不得转载:srcmini » SVG animateTransform元素示例
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏