javascript - 在编写 SVG animateTransform 脚本时使用变量？

Question

我一直在尝试通过 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);  
            }

编辑:我删除了边界框代码以使事情更清楚一些。

Answer 1

虽然您没有使用 getBBox 的结果，但您使用的是变量名称，即字母“cx”和“cy”。您需要使用变量创建一个字符串:

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

这似乎是你想要的。