如何让 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 申请了这个问题。我不知道解决方法。

Answer 2

我发现的唯一解决方法是检测使用 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 3

在你的对象中放置一个<img> 标签。

该对象将在 Firefox 中呈现，并且 webkit 应该显示<img> 标签。

编辑：

另外，自闭跨度标签是怎么回事？ <span> 不支持自闭。