1

Javascript を介して SVG アニメーション要素をグループに追加しようとしています。「animateTransform」は、数値を使用する場合にのみ機能するようです。getBBox で定義された変数を使用すると再生されません (アスタリスク内の行を参照)。ただし、境界ボックスのスクリプトはこれらの値を使用して機能します。

結果は Chrome と Firefox で同じなので、何か間違っていると思います。誰かが私を助けてくれたらありがたいです...

            var svgNamespaceURI = "http://www.w3.org/2000/svg"
            var rectgroup;

            function startup(evt)
            {
                rectgroup = document.getElementById('rectg');
                test(rectgroup);
            }

            function test(target)
            {
                var bounds = target.getBBox();
                var cx = bounds.x+(bounds.width/2);
                var cy = bounds.y+(bounds.height/2);

                var animation = document.createElementNS(svgNamespaceURI, 'animateTransform');
                animation.setAttributeNS(null, 'attributeName', 'transform');
                animation.setAttributeNS(null, 'type', 'rotate');

                **animation.setAttributeNS(null, 'values', '0,cx,cy; 360,cx,cy');>**

                animation.setAttributeNS(null, 'begin', '0s');
                animation.setAttributeNS(null, 'dur', '5s');
                target.appendChild(animation);  
            }

編集: 境界ボックスのコードを削除して、少しわかりやすくしました。

4

1 に答える 1