SVG缩放动画从中心点而不是左上角

时间:2015-08-27 22:02:50

标签: animation svg svg-animate

如何在SVG中使用animateTransform从中心点而不是左上角缩放对象?

示例:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
    <circle style="fill:blue;" cx="50" cy="50" r="45">
        <animateTransform attributeName="transform"
             type="scale"
             from="0 0"
             to="1 1"
             begin="0s"
             dur="1s"
             repeatCount="indefinite"
        />
    </circle>
</svg>

(Codepen:http://codepen.io/anon/pen/wKwrPg?editors=100

enter image description here

1 个答案:

答案 0 :(得分:10)

更改缩放变换以使用additive="sum"并应用将圆圈转换为图像中心的其他变换。因此,不要在图像的中心定义形状,而是将其中心定义为0 0,然后使用transform属性将其转换为50, 50(特定图像的确切中心) )。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
    <circle style="fill:blue;" cx="0" cy="0" r="45" transform="translate(50 50)">
        <animateTransform attributeName="transform"
             type="scale"
             additive="sum" 
             from="0 0"
             to="1 1"
             begin="0s"
             dur="1s"
             repeatCount="indefinite"
        />
    </circle>
</svg>

以下是使用defsuse标记重复使用圈子定义的另一个示例:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
    <defs>
        <circle id="def-circle" style="fill:blue;" cx="0" cy="0" r="45" />
    </defs>

    <use xlink:href="#def-circle" transform="translate(50 50)">
        <animateTransform attributeName="transform" 
        type="scale"
        additive="sum"    
        from="0 0"
        to="1 1"      
        beg="0s"
        dur="1s"
        repeatCount="indefinite" />
    </use>   
</svg>