Question

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

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

jsfiddle here 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();

Answer 1

您的<animateTransform>正在覆盖transform上已有的<g>。如果将translate()移动到内部组，您应该发现事情更好。

Answer 2

我觉得我找到了答案。我没有意识到有一个“加性”变换的概念，或者看到'by'属性，我认为它总是需要来自。我在看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/显示它围绕中心旋转。

SVG动画在旋转时转换为0,0

2 个答案: