使用d3将图像添加到svg容器中，这在FF和Safari上不起作用

Adding image to svg container using d3 not working on FF and Safari

本文关键字：FF 这在 Safari 不起作用 图像 d3 添加 svg 使用      更新时间：2023-09-26

我正在使用这里提出的解决方案如何使用D3.js将图像添加到svg容器中，比如这个

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">

W3规范需要显式的高度/宽度属性。来自文档（粗体显示我的）：

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

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

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

  • 高度或宽度属性为0将禁用形象

相关文章：