15

I'm trying to add an svg image with '.svg' extension to my chart (another svg image created with d3).

This is the code:

d3.select("#chart1 svg")
  .append("svg:image")
  .attr("xlink:href", "img/icons/sun.svg")
  .attr("width", 40)
  .attr("height", 40)
  .attr("x", 228)
  .attr("y",53);

As you can see I'm setting "xlink:href" attribute, but d3 changes this to href in the browser:

<image href="img/icons/sun.svg" width="40" height="40" x="228" y="53"></image>

In fact, this code works perfectly if I use png extension. Any idea?

AndreyAkinshin
  • 18,603
  • 29
  • 96
  • 155
Emilio
  • 1,024
  • 4
  • 16
  • 33
  • 1
    I am having issues with that too. Apparently, D3 removes the prefix if the prefix is a known namespace. Here there is more details about namespaces: https://github.com/mbostock/d3/wiki/Namespaces – Pablo Navarro Sep 21 '13 at 14:15
  • 1
    As long as the attribute is added with `setAttributeNS` it works just fine in all browsers (and to be clear D3 does this). The missing prefix on the attribute itself is really only an issue if you want document/element serialization to be done in a particular way. – Erik Dahlström Oct 22 '13 at 11:48
  • Looks like this is still a thing today... Has anybody found a solution so far? – Peter Jul 01 '16 at 12:05

1 Answers1

17

The code should work as is - here you can see an example of attaching an .svg file to d3:

http://jsfiddle.net/am8ZB/

Don't forget that it's possible the picture is actually there but you just can't see it- you should inspect the page using the browser developer tools to see whether the picture has been placed out of the view area (due to your x/y values, for example).

more info on #chart1 would help in this case.

klugjo
  • 19,422
  • 8
  • 57
  • 75
sangil
  • 1,310
  • 2
  • 18
  • 25