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

2

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

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

似乎是你想要的。

于 2013-06-03T10:50:39.573 回答