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

Question

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

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>

Answer 2

您也可以在 CSS styles and 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>

感谢 Robert Longson 。

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

SVG Scale Animation from Center Point instead of Upper-Left Corner

animation

svg

svg-animate