CODEWITHSUNDEEP
animationsvg
Ian
Ian

Reputation: 13842

SVG animation is translating to 0,0 on rotation

I am trying to get an SVG animation rotation working, ideally around its center (I've been trying it with rotation as the translation point + 1/2 width & height to get it working, but I'm guessing I'm missing something with matrices and translations?).

When I try, it translates the object to the position 0,0 before performing the rotation, rather than around its centre (or near), which I'm trying to avoid.

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

Upvotes: 1

Views: 882

Answers (2)

Ian
Ian

Reputation: 13842

I've found an answer I think. I hadn't realised that there was a concept of 'additive' transforms, or seen the 'by' attribute, I had assumed it always needed from and to. I was looking at http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromToByAndAdditive

So amended part is..

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

jsfiddle at http://jsfiddle.net/keHrm/3/ showing it rotating about centre.

Upvotes: 0

Paul LeBeau
Paul LeBeau

Reputation: 101800

Your <animateTransform> is overwriting the transform that is already on that <g>. If you move the translate() to the inner group, you should find thing work better.

Upvotes: 1

Related Questions