Question

我收到一个我不明白的有线错误。

我使用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和文件类型dot（！）...24svg？

Answer 1

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

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

使除Firefox尝试使用d3.js更改背景图像以外的所有浏览器出错

1 个答案: