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

丹尼

我正在尝试为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路径作为path数组的一部分被访问。我似乎无法弄清楚为什么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()将现有元素添加到另一个父级,则它将仅移动到新父级。因此,代码的结果是,只有最后一个路径将以结尾<animateTransform>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

SVG animateTransform无法在FF和IE上运行

来自分类Dev

如何设置SVG的animateTransform的原点

来自分类Dev

如何设置SVG的animateTransform的原点

来自分类Dev

将复杂的SVG元素附加到选区

来自分类Dev

无法将子项附加到单击的元素

来自分类Dev

将路径附加到路径

来自分类Dev

使用SVG animateTransform旋转SVG中翻译后的SVG中的路径

来自分类Dev

SVG animateTransform 与 Safari 中的缩放和变换原点

来自分类Dev

无法将jquery元素附加到新包装的元素

来自分类Dev

无法将页面内容附加到父元素

来自分类Dev

无法将Button元素附加到li父级

来自分类Dev

无法将图像附加到div元素,引发异常

来自分类Dev

无法将子元素附加到父div

来自分类Dev

无法将多个元素附加到数组对象中

来自分类Dev

将元素附加到首页

来自分类Dev

使用D3.js将SVG元素附加到HTML表格单元格

来自分类Dev

如何正确地将几个svg元素附加到html文档?

来自分类Dev

d3:将元素附加到现有svg时的关键功能选择

来自分类Dev

SVG animateTransform同时旋转和缩放同一对象?

来自分类Dev

SVG animateTransform同时旋转和缩放同一对象?

来自分类Dev

有没有办法延迟SVG animateTransform中的重启

来自分类Dev

SVG SMIL:animateTransform替换为设置(不透明度和缩放属性)

来自分类Dev

将元素索引附加到每个元素

来自分类Dev

将路径附加到文件名

来自分类Dev

将路径附加到图标-Google Polymer

来自分类Dev

将代理附加到类路径

来自分类Dev

如何将文字附加到SVG

来自分类Dev

使用Webpack将SVG附加到DOM

来自分类Dev

如何将文字附加到SVG