锐客网

  1. 首页 > 睿知 > it技术 > >

SVG animateTransform元素示例

svgIT知识

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

【SVG animateTransform元素示例】立即测试

    推荐阅读


    上一篇：SVG animateMotion元素用法示例

    下一篇：SVG动画介绍和用法示例