如何使用 animateTransform 使对象围绕屏幕的确切中心旋转？答案

【问题标题】：How to make an object rotate around the exact center of the screen using animateTransform?如何使用 animateTransform 使对象围绕屏幕的确切中心旋转？
【发布时间】：2017-09-19 18:33:40
【问题描述】：

考虑以下 SVG 代码，用于围绕屏幕中心移动一个带有硬编码尺寸的圆圈：

<svg xmlns="http://www.w3.org/2000/svg">
    <g>
        <ellipse id="circ" style="fill:#000000"
            cx="60%" cy="50%"
            rx="10" ry="10" />

        <!--Assuming window size is 1000x1000-->    
        <animateTransform attributeName="transform"
            type="rotate" dur="10s"
            from="0,500,500"
            to="360,500,500"
            repeatCount="indefinite"/>
    </g>
</svg>

如果我尝试以百分比形式提供旋转中心，则动画根本不起作用：

<animateTransform attributeName="transform"
    type="rotate" dur="10s"
    from="0,50%,50%"
    to="360,50%,50%"
    repeatCount="indefinite"/>

我该如何解决这个问题？

【问题讨论】：

标签： animation svg units-of-measurement smil

【解决方案1】：

在你的 SVG 上设置一个viewBox，然后无论你做什么尺寸，椭圆都会围绕它的中心旋转。

viewBox="0 0 1000 1000"

这里选择宽度和高度的值 1000 是因为它会使 500 成为中心。

svg:nth-child(1) {
  width: 200px;
}

svg:nth-child(2) {
  width: 500px;
}

svg {
  border: solid 1px green;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
    <g>
        <ellipse id="circ" style="fill:#000000"
            cx="60%" cy="50%"
            rx="10" ry="10" />

        <!--Assuming window size is 1000x1000-->    
        <animateTransform attributeName="transform"
            type="rotate" dur="10s"
            from="0,500,500"
            to="360,500,500"
            repeatCount="indefinite"/>
    </g>
</svg>

<!-- An exact duplicate of th first one -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
    <g>
        <ellipse id="circ" style="fill:#000000"
            cx="60%" cy="50%"
            rx="10" ry="10" />

        <!--Assuming window size is 1000x1000-->    
        <animateTransform attributeName="transform"
            type="rotate" dur="10s"
            from="0,500,500"
            to="360,500,500"
            repeatCount="indefinite"/>
    </g>
</svg>

【讨论】：