我收到一个我无法理解的连线错误。
我使用 CSS 将背景图像(svg 文件)放在一个 div 中。我使用此 SVG 生成 Sprite 动画，效果非常好。
.runner {
background: url("0804_0537_Runner_sf-24.svg") no-repeat;
display: inline-block;
width: 30px;
height: 40px;
animation: walk 0.4s steps(18) infinite;
animation-play-state: paused;
}
背景图像将在开始时在所有浏览器中加载。但是当我之后尝试使用 d3.js 更改背景图片时
var animatedicon = "0805_0537_Runner_sf-24.svg";
d3.selectAll('.runner')
.transition()
.delay(1000)
.style('background', 'url('+animatedicon+') no-repeat');
除 FireFox 之外的所有浏览器都会抛出错误。这是来自 Chrome 的控制台日志:
GET file:///Volumes/.../804.9576754956776_536.9717661381104_Runner_sf-23.99873815142393svg net::ERR_FILE_NOT_FOUND
GET file:///Volumes/.../805_537_Runner_sf-24svg net::ERR_FILE_NOT_FOUND
用 <object> 在 DOM 中直接加载文件不是问题， 也。如何让 3D.js 替换正确的 URL 而无需在名称之间填充有线数字或忘记第一个 0名称和文件类型点(!)...24svg ？
最佳答案
好的。这似乎是 d3.js 中的一个错误，它与文件名 (!) 中的 numbers 有关。
一旦我将名称从 0804_0537_Runner_sf-24.svg 更改为例如Runnerstart.svg 和 0805_0537_Runner_sf-24.svg => Runnerrun.svg 或 _Runnerrun.svg 一切正常...
关于javascript - 错误所有浏览器，但 Firefox 尝试使用 d3.js 更改背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55046990/