Question

考虑以下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"/>

我该如何解决这个问题？

Answer 1

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

viewBox="0 0 1000 1000"

选择宽度和高度为1000的值，因为它将使500为中心。

＆＃13;

svg:nth-child(1) {
  width: 200px;
}

svg:nth-child(2) {
  width: 500px;
}

svg {
  border: solid 1px green;
}

＆＃13;

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

＆＃13;

如何使用animateTransform使对象围绕屏幕的正中心旋转？

1 个答案: