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

我正在使用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">

最佳答案

W3规范需要明确的高度/宽度属性。从docs（爆炸中的我）：


  有一些重要的事情要注意（从
  W3规格）：
  
  
  如果未设置x或y属性，则将它们设置为0。
  如果您未设置高度或宽度属性，则将它们设置为
  0。
  将height或width属性设置为0将禁用渲染
  图片。