1

I'm using the solution proposed here How to add an image to an svg container using D3.js, like this

svg.selectAll()
        .data(chart.data.values)
        .enter()
        .append('svg:image')
        .attr('class', 'logo-legend')
        .attr('x', function (d, i) {
                return d.position;
            }
        )
        .attr('y', 251)
        .attr('xlink:href', function (d, i) {
            return d.fileName;
        });

Which works on Chrome, but it's not working on FF and Safari. I can see on firebug that the images are being created on the html, but they are just not showing. Any idea why?

I can see that on Chrome the element created is

<image class="logo-legend" x="46.5" y="251" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/img/services/logo.png"></image>

While on FF is

<image class="logo-legend" x="46.5" y="251" href="/img/services/logo.png">
Community
  • 1
  • 1
Marylia Gutierrez
  • 769
  • 7
  • 11

1 Answers1

2

The W3 spec requires explicit height/width attributes. From the docs (bolding mine):

There are some important things to take note of (referenced from the W3 specs):

  • If you do not set the x or y attributes, they will be set to 0.

  • If you do not set the height or width attributes, they will be set to 0.

  • Having a height or width attribute of 0 will disable rendering of the image.

Mark
  • 106,305
  • 20
  • 172
  • 230