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

Question

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

例子:

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

(代码笔:http://codepen.io/anon/pen/wKwrPg?editors=100)

Answer 1

更改您的缩放变换以使用 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>

这是另一个使用 defs 的示例和 use重复使用圆定义的标签:

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