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

0

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.

于 2013-10-17T20:34:10.857 に答える