0

Instead of generic SVG shapes, I want to bind external SVG icons to my data with D3. I can do that like this

group = svg.selectAll("g")
           .data(dataset)
           .enter()
           .append("g");
group.append("svg:image")
     .attr("xlink:href",path)
     .attr(...)

etc but I run into several scaling issues. This fiddle embeds an exemplary icon. Running it in three different browsers, I get three different renderings. Chrome does it best:

Chrome

Edge:

Edge

Firefox:

Firefox

I've added a viewPort attribute, which appears in various guides on how to scale SVGs, but it doesn't seem to do anything no matter the coordinates I set it to. How can I make the scaling behave like in Chrome in all browsers?

smcs
  • 1,772
  • 3
  • 18
  • 48
  • 1
    I believe that is at least a known issue in Firefox: http://stackoverflow.com/questions/14804950/include-one-svg-inside-another – Terry Jan 21 '16 at 23:31
  • Well that's bad news! I hoped SVG would improve my visualizations :( However in my case there's no rasterization so there must have been some improvement in the engines at least.. – smcs Jan 22 '16 at 00:47

0 Answers0