我想将一系列图像显示为动画——我会使用 GIF，除非我想操纵特定的帧。
我已经在 SVG Canvas 上显示了图像，现在我想动态更改 xlink:href。
function startAnimation(){
c += 1;
d3.select(this)
.transition()
.attr("xlink:href", "images/image-" + c.toString() +".png")
.each("end", startAnimation);
};
如果我尝试更改像图像高度这样的属性，这种方法工作正常，但它似乎不适用于属性 xlink:href。
有没有办法像这样动态更新图片？
最佳答案
您需要在开始动画序列之前预加载和缓存图像。否则，图像将延迟加载 - 图像需要 250 毫秒来加载并不是不合理的，这意味着在图像加载时，您将进入下一帧。
对于HTML元素，可以通过创建Image对象(new Image)，设置src属性，然后监听加载事件(onload) 查看所有图像何时准备就绪。当您从预加载的 Image 设置显示的 HTML img 元素的 src 时，浏览器会使用缓存的内存图像。
不过，此技术可能适用于也可能不适用于 SVG 图像。一种更好的技术是使用 sprite 表，将动画的所有帧组合成一个图像，然后在客户端上裁剪。在 HTML 中，您通常为此使用 background-position 样式；在 SVG 中，您可以通过裁剪或溢出来做同样的事情:隐藏。
另一种选择是创建多个 svg:image 元素，然后隐藏所有元素(例如，通过不透明度或将元素放置在屏幕外)。
(此外，由于您没有插入属性，因此对动画使用 setInterval 而不是 d3.transition 可能更简单。)
关于image - 在 D3 中动态显示图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12888516/