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

似乎是你想要的。

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

1 个答案: