如何讓SVG在web-kit中透明渲染？

Question

我有問題將SVG嵌入到網頁中。我找到了最簡單的方法來使用圖像標籤。例如：

<img src="my_graphic.svg" height="100"/> 

適用於web-kit。我不需要明確設置寬度，瀏覽器將保持高寬比。非常好！

雖然這在Firefox中不起作用 - 它不是跨瀏覽器。那麼如何嵌入作爲一個對象？

<object type="image/svg+xml" 
     height="100" 
     width="554" 
     data="my_graphic.svgz"> 
     <span/></object> 

這次我使用svgz和MIME類型已被添加，瞧！它可以在firefox和webkit中使用。然而，在webkit中，我需要明確指出寬度，否則我們會得到一些討厭的包含元素滾動條。但更糟的是背景不再透明。它用白色背景呈現。

因此，一種方法在webkit中完美工作。另一個在Mozilla中完美運行。我能做些什麼才能使它在兩個方面都可靠地工作？

對此有何興趣？請參閱我的鏈接以供參考： http://sumocreations.com/demo/svg/new_dttg.html

Answer 1

我發現的唯一工作是通過檢測使用SVG源的img是否正確呈現。我只通過指定一個維度來做到這一點。無論是高度還是寬度，但不是兩者。然後，我可以測試替代維度是否大於零。如果是我隱藏的對象。如果沒有，我隱藏圖像。這裏是如何用jQuery做到這一點：

<script type="text/javascript"> 
    $(document).ready(function() { 
     if($('img.logo').width() < 1) { 
     $('img.logo').hide(); $('object.logo').show(); 
    } else { 
     $('img.logo').show(); $('object.logo').hide(); 
     } 
    }); 
</script> 

查看演示：http://sumocreations.com/demo/svg/new_dttg.html

Answer 2

將<img>標記放置在對象內。

該對象將在Firefox中呈現，webkit應顯示<img>標記。

編輯：

而且，這是怎麼回事用自我封閉的跨度標籤？ <span>不支持自動關閉。