Question

我正在尝试为SVG文件中的某些路径设置动画，但我似乎无法将必要的<animateTransform>标记作为这些路径的子项附加。

这是我的代码：

currentState.addEventListener("click", function(event) {
    var i = 0;

    var map_anim = svgDoc.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
    map_anim.setAttributeNS(null, 'attributeName', 'transform');
    map_anim.setAttributeNS(null, 'attributeType', 'XML');
    map_anim.setAttributeNS(null, 'type', 'scale');
    map_anim.setAttributeNS(null, 'to', '2');
    map_anim.setAttributeNS(null, 'fill', 'freeze');
    var paths = event.currentTarget.children;
    for (i = 0; i < paths.length; i++) {
    paths[i].appendChild(map_anim);
    }
    map_anim.beginElement();
}, true);

我已经使用调试器逐步完成了这段代码，我知道SVG路径是作为路径数组的一部分进行访问的。我似乎无法弄清楚为什么appendChild不起作用，而且我无法找到一种我可以替代的不同方法。

请告诉我如何让这个动画工作？

以下是运行onclick函数后记录到控制台的路径的代码：

<path xmlns="http://www.w3.org/2000/svg" class="st12" id="path" d="M165.7,347.4c3.3,0.9,6.4,1.9,9.6,2.6c1.1,0.2,2.3-0.4,3.5-0.6c-0.5-1.2-0.7-2.7-1.5-3.4   c-4.8-4.1-11.8-5.7-18.5-4.2c0.3-1.6,0.6-3,0.7-4.5c0.2-2,0.4-4.1,0.3-6.1c-0.2-2.2-1.4-3.8-3.6-4.6c-3.3-1.2-4.7-3.8-4.6-6.9   c0.1-4.2,1.1-8.4,1.1-12.6c0.1-8.1,0.7-16.2-3.2-23.8c-0.4-0.7-0.1-2.1,0.4-2.9c1.1-1.7,2.5-3.2,3.9-4.7c6.5-7.4,9.3-15.9,8.6-25.6   c0-0.5,0-1,0-1.8c23.4,6.4,46.6,12.7,70.1,19.2c-1,3.3-1.9,6.5-2.9,9.7c-5.5,18.5-11.1,37-16.7,55.4c-0.5,1.7-0.1,2.9,0.8,4.2   c22,32.4,43.9,64.9,65.8,97.3c3.1,4.5,6,9.1,9.2,13.5c0.6,0.9,1.8,1.4,3,1.9c0.4,5.6,1.8,11.2,4.6,16.3c0.2,0.4-0.1,1.5-0.5,2   c-2,2.5-4.1,5-6.3,7.4c-4,4.2-6.8,8.9-8.2,14.5c-0.4,1.5-0.1,3.4,0.4,4.9c1.2,3.3-0.4,8.3-3.6,9.9c-0.6,0.3-1.7,0.3-2.4,0   c-11.7-5.6-24.3-7.7-37.1-8.6c-0.9-0.1-1.7-0.3-2.6-0.3c-1.6,0-2.1-0.8-2.3-2.4c-1.1-8.1-2.6-16-6.8-23.2c-2-3.5-4.7-6.2-8.9-7.1   c-0.6-0.1-1.3-0.9-1.6-1.6c-0.7-1.4-1-3.2-1.9-4.4c-1.1-1.3-2.6-2.9-4.1-3.1c-5.7-0.7-8.2-5-11.3-8.7c-1-1.2-2-2.6-3.4-3.1   c-4.2-1.7-8.6-3-12.9-4.5c-0.9-0.3-1.8-0.7-2.6-1c-2-0.7-2.5-1.8-2-3.9c1.9-6.9,2.3-13.9-0.9-20.6c-1.3-2.8-3.2-5.4-5-8   c-2.7-4-6-7.7-6.8-12.7c-0.3-1.7-0.3-4.1,0.6-5.3c3.7-4.7,2.3-9.5,0.9-14.3c-0.9-3.2-2.2-6.4-3.2-9.6c-0.2-0.7-0.1-1.9,0.3-2.2   c3.5-2.8,3.3-6.2,1.8-9.9c-0.2-0.4-0.3-0.8-0.4-1.2C165.5,348.4,165.6,348.2,165.7,347.4z" fill="#000000" fill-opacity="1">
    </path>

谢谢！

Answer 1

您需要为每个路径创建一个新元素。如果您appendChild()现有元素到另一个父元素，它只会移动到新父元素。因此，代码的结果是只有最后一个路径最终会以<animateTransform>结束。

无法将<animatetransform>元素附加到SVG路径

1 个答案: