SVG <animateTransform>用法及代码示例

SVG代表可缩放矢量图形。它定义了基于矢量的图形和动画，就像在HTML Canvas中一样。

animateTransform元素在其目标元素上设置转换属性的动画，从而允许动画控制平移，缩放，旋转和/或倾斜。

用法:

<animateTransform attributeName=''transform''/>

属性：

from:在动画期间将修改的属性的初始值。
to:在动画期间将修改的属性的最终值。
type:它定义了转换的类型，其值随时间变化。
dur:动画的持续时间。
repeatCount:动画发生的次数。
repeatDur:重复播放动画的总时间。
attributeName:将被动画化的CSS属性的名称。

例：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg width="120" height="120"> 
  
        <polygon points="60,30 90,90 30,90"> 
            <animateTransform attributeName="transform"
                attributeType="XML" type="rotate" 
                from="0 60 70" to="360 60 70"
                dur="10s" repeatCount="indefinite" /> 
        </polygon> 
    </svg> 
</body> 
  
</html>

支持的浏览器：

Chrome
Edge
Firefox
Safari
Opera

相关用法

注：本文由纯净天空筛选整理自rbbansal大神的英文原创作品 SVG <animateTransform> Element。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。