javascript - 使用 d3 将图像添加到 svg 容器不适用于 FF 和 Safari

Question

我正在使用这里提出的解决方案 How to add an image to an svg container using D3.js ，像这样

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;
        });

它适用于 Chrome，但不适用于 FF 和 Safari。我可以在 Firebug 上看到图像是在 html 上创建的，但它们只是没有显示。知道为什么吗？

我可以看到在 Chrome 上创建的元素是

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

当 FF 是

<image class="logo-legend" x="46.5" y="251" href="/img/services/logo.png">

Answer 1

W3 规范需要明确的高度/宽度属性。来自docs (加粗我的):

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.