时间戳

首页 > 解决方案 > 错误所有浏览器，但 Firefox 尝试使用 d3.js 更改背景图像

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

问题描述

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

我将背景图像（svg 文件）放在带有 CSS 的 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

在 DOM 中直接加载文件也没有问题<object>。如何让 3D.js 替换正确的 URL，而无需在名称之间填充有线数字或忘记名称的第一个0和文件类型 dot(!) ...24svg？

标签： javascriptcssd3.js

解决方案

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

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

推荐阅读