Question

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

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

适用于网络工具包。我不需要显式设置宽度，浏览器将保持宽高比。非常好！

这在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>不支持自我关闭。

如何在Web工具包中使用透明度来渲染SVG？

3 个答案: