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

【问题标题】：SVG Scale Animation from Center Point instead of Upper-Left Corner从中心点而不是左上角的 SVG 缩放动画
【发布时间】：2015-11-22 11:22:26
【问题描述】：

如何在 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>

（代码笔：http://codepen.io/anon/pen/wKwrPg?editors=100）

【问题讨论】：

标签： animation svg svg-animate

【解决方案1】：

您也可以在 CSS styles 和 transform-origin 属性的帮助下做到这一点。
好处是您不必计算坐标和平移对象。

<svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <style>
    #logo { transform-origin: center; }
  </style>

  <g id="logo">
    <animateTransform attributeName="transform" begin="0s" type="scale" dur="2s" from="1" to=".5" repeatCount="indefinite"/>
    <circle r="8" cx="12" cy="12" />
  </g>
</svg>

#logo {
  transform-origin: center;
}

<svg version="1.1" viewBox="0 0 24 24" width="100%" height="100px" xmlns="http://www.w3.org/2000/svg">
  <g id="logo">
    <animateTransform attributeName="transform" begin="0s" type="scale" dur="2s" from="1" to=".5" repeatCount="indefinite"/>
    <circle r="8" cx="12" cy="12" />
  </g>  
</svg>

在您的特定情况下，另一种方法是为圆本身的半径设置动画：

<circle r="0" cx="50" cy="50">
  <animate attributeName="r" from="0" to ="10" begin="1s" dur="300ms" fill="freeze" />
</circle>

感谢罗伯特朗森this answer。

【讨论】：

【解决方案2】：

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

【讨论】：

如果不是圆形，例如复杂路径，如何定义它在中心？只需计算准确的中心点，然后先移动到那里再移动到真正的起始位置？