I am experiencing a strange error that is puzzling to me.
What I have done is placed a background image (SVG file) in a div using CSS. This SVG is used to create a Sprite animation, which is functioning correctly.
.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;
}
The background image loads successfully initially in all browsers. However, when attempting to change the background image later using d3.js
var animatedicon = "0805_0537_Runner_sf-24.svg";
d3.selectAll('.runner')
.transition()
.delay(1000)
.style('background', 'url('+animatedicon+') no-repeat');
All browsers except Firefox throw an error. In Chrome, for example, the console log shows:
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
Loading the file directly into the DOM with an <object> tag is not a problem either. How can I get d3.js to replace the URL properly without adding strange numbers between the filename or omitting the initial 0 and the file type dot(!) like ...24svg?