將圖片添加到SVG使用D3在FF和Safari

不工作我使用的是這裏提出How to add an image to an svg container using D3.js的解決方案，這樣將圖片添加到SVG使用D3在FF和Safari

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

來源

2015-12-09 Marylia Gutierrez

的W3規範要求明確的高度/寬度屬性。從docs（加粗礦）：

有注意到的一些重要的事情（從 W3規格參考）：

如果不設置x或y屬性，它們將被設置爲0。

如果您沒有設置高度或寬度屬性，它們將被設置爲0

如果高度或寬度屬性爲0，將會禁止渲染圖像。

來源

2015-12-09 15:46:16 Mark

我說我班的那些屬性， .logo-傳奇{ 高度：30PX; width：30px; } –

@MaryliaGutierrez，嘗試將它們設置爲* attributes *而不是樣式。 – Mark

它的工作！謝謝！ :) –

將圖片添加到SVG使用D3在FF和Safari

回答

相關問題