无法将 <animateTransform> 元素附加到 SVG 路径答案

【问题标题】：Can't append <animateTransform> element to SVG path无法将 <animateTransform> 元素附加到 SVG 路径
【发布时间】：2015-06-06 11:53:33
【问题描述】：

我正在尝试为 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>

谢谢！

【问题讨论】：

您确定appendChild 不起作用吗？或者它只是动画，它不起作用？你能用相应的标记创建一个小提琴吗？
如果我手动将标签插入到 SVG 文件中，我已经验证了动画是否有效。由于代码库非常大，我无法真正创建小提琴。
我添加了 path.appendChild(map_anim) 执行后出现的路径代码。
抱歉，如果不亲自测试/调试代码，我将无法帮助您...也许您可以提出一个最小的示例设置？只是一些直接相关的标记？

标签： javascript svg

【解决方案1】：

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

【讨论】：

谢谢，这为我解决了问题！