在D3js中为外部svg图标的子元素设置动画？

我被要求创建一个仪表板，用于可视化滑雪的机械原理。他要我做的第一件事就是想象滑雪时的空气阻力。因此，我认为如果我可以创建一个滑雪者的SVG图标，它可以向不同的方向移动，那就太好了。例如，为了在滑雪中想象正确的手臂位置的效果，我希望能够将手臂移动到滑雪者的前面，而不是下垂。简单的2D图形

在D3中，像这样附加图像

const skier = g
.append('image')
.attr('id', 'skier')
.datum(p3)
.attr('href', skierIconSvg)
.attr('width', 100)
.attr('height', 100)
.attr('transform', 'translate(-50, -40)')

---

但是，使用这种方法，我发现只执行一个元素的动画很棘手，例如svg图标上的arm。因此，我的问题是，是否有一种方法可以在D3.js中仅为外部svg图标的一个元素设置动画？

这应该是可能的，我创建了这个展示，介绍了如何实现这一点。 我将SVG解析为XML，并将其子项直接附加到我的可信XML文件中。然后，我可以选择具有可怕的自动生成ID的手臂和棍子-您可以在SVG文件内部更改它们，并旋转它们

唯一真正让人恼火的是旋转会大量置换元素。我用transform origin修复了这个问题，我通过尝试和错误手动将其设置在肩部关节附近。这样，手臂将围绕肩部旋转，而不是围绕SVG的左上角旋转

//herokuapp只是一个使其工作的黑客，因此应该更容易 //在当地为您服务 d3.xml'https://cors-anywhere.herokuapp.com/https://cmagelssen.no/skier.svg' .thenxml=>{ 常量svgEl=d3。选择“mySvg” .附加“g” .attr'id'，'skier' .节点； Array.fromxml.documentElement.children.forEachel=>{ svgEl.appendChildel； }; 常数skierG=d3。选择skier>g>g； 常量skierArms=d3.selectskier ailpBmbkR //尝试一个错误，但如果你离滑雪者的肩膀这么近， //你不必做变换，可以很容易地改变旋转！ .styletransform原点，322px 244px .样式转换，旋转30度； const skierStick=d3.selectskier c4PTA7jJrE //和滑雪者的手臂一样！ .styletransform原点，322px 244px .样式转换，旋转30度； } .catch=>{ 控制台错误； } .finally=>{ console.log'done'； };

---

图像不支持脚本，所以这几乎是不可能的。。因此，不可能绘制一个外部svg图标，用g元素包装其中的一些元素，然后只能在这些g元素上执行动画？您计划如何包装图像的一些元素。图像不透明，您无法访问其内容。-我想我可以在svg中添加一个g元素，可能带有一个类名，然后使用d3只选择使用iframe的元素，而不是图像元素。你为我所有的问题提供了解决方案。你是怎么发现我的手臂的？它只是svg上的一个id标记吗？我只是使用元素检查器来查找匹配的path元素，这些id实际上不是可描述的，而是原则上的。我可以在adobe illustrator中绘制图标，并将其保存到svg。然后我可以进入svg，在手臂、腿、头和身体上添加id标记？我不完全确定，但理论上，你可以做到，我将在这个周末尝试。我会给你发一份最新进展。