1

我正在尝试使 SVG 动画旋转工作，理想情况下围绕其中心（我一直在尝试使用旋转作为平移点 + 1/2 宽度和高度来使其工作，但我猜我错过了一些东西有矩阵和翻译？）。

当我尝试时，它会在执行旋转之前将对象转换到位置 0,0，而不是围绕它的中心（或附近），这是我试图避免的。

jsfiddle在这里http://jsfiddle.net/keHrm/

<svg xmlns="http://www.w3.org/2000/svg" height="800" width="800" version="1.1">
    <g id="1003_moveable" transform="translate(292 124)">
    <g fill="yellow" desc="A shape" id="1002_moveable">
        <rect width="200" height="100" x="10" y="50"></rect>
        <circle cy="20" cx="20" r="90" stroke="#777" fill=""></circle>
    </g>

    <animate id="animid_1004" begin="indefinite"></animate>
    <animateTransform fill="none" type="rotate" attributeType="XML" attributeName="transform" from="0,432,234" to="360,432,234" dur="3s" id="animid_1005" begin="animid_1004.begin">

    </animateTransform>
    </g>
</svg>

document.getElementById("animid_1004").beginElement();
4

2 回答 2

1

你<animateTransform>正在覆盖transform已经存在的那个<g>。如果您将其translate()移至内部组，您应该会发现事情会更好。

于 2013-10-17T20:29:58.017 回答
0

我找到了我认为的答案。我没有意识到有“加法”变换的概念，也没有看到“by”属性，我认为它总是需要 from 和 to。我在看http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromToByAndAdditive

所以修改的部分是..

 <animateTransform fill="none" type="rotate" attributeType="XML" attributeName="transform" by="360" dur="3s" id="animid_1005" begin="animid_1004.begin">

jsfiddle 在http://jsfiddle.net/keHrm/3/显示它围绕中心旋转。

于 2013-10-17T20:34:10.857 回答