如何在Firefox中與PNG交換使用SVG圖像？

Question

我的項目支持用戶上傳自己的圖標以用於系統中的各種實體。我想支持SVG，因爲這意味着相同的圖像可以很好地縮放，因此可以在多個地方使用。

Firefox有一個當前bug，可防止在<img>標記中使用SVG文件。從我的其他xhtml工作中，我瞭解到<object>標籤是外部媒體的（xhtml）方式（除了基本相同的增強後退功能支持），並且由於Firefox在對象標籤中支持SVG，我轉而使用這些。

但是，看起來SVG的「特性」阻止它們作爲可伸縮圖像互換使用，因爲JavaScript事件似乎沒有從對象中冒出來，還有一些其他事情。

有誰知道這些問題是否可以解決？即我怎麼能告訴Firefox我只想使用對象標籤的圖片？

Answer 1

我不知道這是否有資格作爲作弊，但我已經設置對象標籤「的z-index：-1」和含股利的立場：相對「（在不改變頁面佈局的情況下創建新的定位上下文）。

爲此，我添加了另一個絕對定位的div，其高度和寬度均設置爲100％;這有效地位於對象標籤的上方（並且由於定位上下文而沒有進入容器後面），最終結果是鼠標事件被覆蓋div捕獲並冒泡到容器節點。

可以通過jQuery添加額外的div，但爲了簡單起見，我只是在頁面組合時將其固定在服務器端。

Answer 2

也許你可以使用正確大小的DIV，並設置background-image就可以了。

編輯：這似乎不起作用，雖然我不知道爲什麼。

Answer 3

對象元素「封裝」包含對象，即兩個DOM完全分離。因此，事件無法從SVG DOM傳遞到containsig HTML DOM。

但是，使用JavaScript和AJAX，你可以加載SVG文件（因爲它是XML），並把它直接到DOM（你可能需要的地方設置一些寬/高）：

使用jQuery，代碼是沿着這樣的：

$.get('icon.svg', function (svg) { 
    $('#put_svg_here').append(svg.rootElement); 
}, 'xml');