错误所有浏览器，但 Firefox 尝试使用 d3.js 更改背景图像答案

【问题标题】：Error all browsers but Firefox trying to change background image with d3.js错误所有浏览器，但 Firefox 尝试使用 d3.js 更改背景图像
【发布时间】：2019-07-29 12:40:57
【问题描述】：

我收到一个我无法理解的有线错误。

我使用 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？

【问题讨论】：

看起来其他浏览器在您的文件名中看到了一个浮点数，这很有趣：D
@MaxouMask 有趣的那个花了我半个小时，因为我检查了除了浮点数之外的其他东西被解析：D。但它似乎只与 d3.js 相关，因为它只在脚本计算 URL 时发生......

标签： javascript css d3.js

【解决方案1】：

好的。这似乎是 d3.js 中的一个错误，与文件名中的数字（！）有关。

只要我将名称从 0804_0537_Runner_sf-24.svg 更改为例如Runnerstart.svg 和 0805_0537_Runner_sf-24.svg => Runnerrun.svg 或 _Runnerrun.svg 一切正常...

【讨论】：

这与 D3 无关，这只是用户代理在该 CSS 中处理 URI 的方式。
@GerardoFurtado 哦，我有。看基本 CSS (.runner) 中的名称，它会在所有浏览器中加载，对。在所有浏览器中，在
是的，你是对的：当我第一次阅读你的问题时，我没有看到过渡，抱歉。问题显然是转换：对于初学者来说，你不应该在这里使用转换，因为转换试图从给定的开始值插入到结束值。显然，您不能从一个 URI 插入到另一个 URI，这是没有意义的。因此，D3 正在尝试插入从0804_0537 到0805_0537 的数字。在过渡的第一帧，值为804.9576754956776_536.9717661381104，代码崩溃。有趣的是，我无法重现那个数字插值......
...无论是在 V4 还是 v5 中：在我的尝试中，插值正在做它预期做的事情：在过渡的第一帧更改为第二个值（显然，这使得过渡无关）。所以，如果你能设置一个minimal reproducible example，那就太好了，这样我就可以缓存每一帧的值。
我相信你错过了我的意思：你不能转换 URI。所有的过渡都是插值！所以，这里没有使用过渡的理由，它没有过渡任何东西，你只依靠delay 来改变背景。所以，只需使用一个普通的setTimeout 来更改它。