首页 > itarticle > svg

svg

admin 11月 14, 2020 0

官方文档 animateMotion
官方文档 animateTransform

animateMotion

animateMotion元素导致引用的元素沿着运动路径移动。

<svg width="120" height="120"  viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg" version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink" >
    <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
        stroke="lightgrey" stroke-width="2" 
        fill="none" id="theMotionPath"/>
    <circle cx="10" cy="110" r="3" fill="lightgrey"  />
    <circle cx="110" cy="10" r="3" fill="lightgrey"  />
    <circle cx="" cy="" r="5" fill="red">
        <animateMotion dur="6s" repeatCount="indefinite">
            <mpath xlink:href="#theMotionPath"/>
        </animateMotion>
    </circle>
</svg>

animateTransform

animateTransform元素变动了目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切。

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <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" ></animateTransform>
    </polygon>
</svg>