使用 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。我可以在萤火虫上看到图像是在 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（加粗我的）：

有一些重要的事情需要注意（参考自 W3 规格）：

• 如果不设置 x 或 y 属性，它们将被设置为 0。

• 如果不设置高度或宽度属性，它们将被设置为 0.

• 高度或宽度属性为 0 将禁用渲染 图片。