CODEWITHSUNDEEP
javascriptsvg
dnv
dnv

Reputation: 1038

Using variables when scripting an SVG animateTransform?

I have been trying append SVG animation elements to a group via Javascript. 'animateTransform' seems to work only when I use numeric values; it doesn't play when I use variables defined via getBBox (see the line within the asterisks). The script for the bounding box works using these values however.

As the result is the same in Chrome and Firefox, I'm guessing it's something I'm doing wrong. I'd be grateful if someone could help me out...

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

EDIT: I removed the bounding box code to make things a little clearer.

Upvotes: 1

Views: 801

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

You're not using the results of getBBox though, you're using the variable names i.e. the letters "cx" and "cy". You need to create a string using the variables:

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

Would seem to be what you want.

Upvotes: 2

Related Questions