在D3js中动画化外部svg图标的子元素？
在D3js中动画化外部svg图标的子元素？
提问于 2020-09-14 22:56:45
我被要求创建一个仪表板来可视化滑雪的机械原理。他要我做的第一件事就是想象滑雪场中的空气阻力。因此，我认为如果我能创建一个滑雪者的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图标元素的动画呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-15 06:04:06
这应该是可能的，我创建了这个展示如何做到这一点。我将SVG解析为XML，并将其子文件直接附加到受信任的XML文件中。然后，我可以选择手臂和棒(它有可怕的自动生成的ID-你可以改变他们在SVG文件本身)，并旋转他们。
唯一真正令人讨厌的是旋转会大量地取代元素。我用transform-origin修复了这个问题，通过人工测试和错误设置，它靠近肩关节。这样，手臂将围绕肩部旋转，而不是围绕SVG的左上角。
// The herokuapp is just a hack to make it work on SO, should be easier
// for you locally
d3.xml('https://cors-anywhere.herokuapp.com/https://cmagelssen.no/skier.svg')
.then((xml) => {
const svgEl = d3.select('#mySvg')
.append('g')
.attr('id', 'skier')
.node();
Array.from(xml.documentElement.children).forEach((el) => {
svgEl.appendChild(el);
});
const skierG = d3.select("#skier > g > g");
const skierArms = d3.select("#skier #ailpBmbkR")
// Trial an error, but if you get this close to the skier's shoulder,
// you don't have to do a transform and can easily vary rotation!
.style("transform-origin", "322px 244px")
.style("transform", "rotate(30deg)");
const skierStick = d3.select("#skier #c4PTA7jJrE")
// Same point as the skier arms!
.style("transform-origin", "322px 244px")
.style("transform", "rotate(30deg)");
})
.catch((e) => {
console.error(e);
})
.finally(() => {
console.log('done');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg id="mySvg" width="500" height="500"></svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63892805
复制相关文章
相似问题
腾讯云开发者
