代码之家 › 专栏 › 技术社区 › Jim Jeffers

如何让SVG在Web工具包中以透明方式呈现?

svg xml css html

Jim Jeffers · 技术社区 · 16 年前

我在将SVG嵌入网页时遇到问题。我找到了最简单的方法来使用图像标记。例如:

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

在Web工具包中工作。我不需要显式设置宽度,浏览器将保持纵横比。很不错的!

但这在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

3 回复 | 直到 16 年前

heycam 16 年前

我不相信现在 <object> 在WebKit中具有透明的背景。 There's a bug 为这个问题申请了。我不知道有什么解决办法。

Jim Jeffers 16 年前

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