html - 如何让 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

我认为 <object> 目前不可能在 WebKit 中拥有透明背景。 There's a bug 提出了这个问题。我不知道有什么解决方法。