如何在HTML代码中嵌入SVG文件并在不同浏览器上产生相同的结果？

Question

如何在HTML代码中嵌入SVG文件并在不同浏览器上产生相同的结果？

10

但是我还有一个（较小的）问题。我正在使用Firefox 3.5和Safari 4（在Mac上），当我将SVG嵌入XHTML时，完全没有相同的结果。

我可以使用<object>或<embedded>元素（但我认为后者已被弃用）。我使用它们就像这样：

<div id="map_canvas" style="width: 900px; height: 900px">
  <object data="test.svg" width="100%" height="100%" type="image/svg+xml"/>
</div>

我的SVG图像在Firefox和Safari中的大小和比例不同。在我的SVG中，width、height和viewBox已经定义。

有没有一种方法可以使所有浏览器都产生相同的结果（我不关心不支持SVG的IE...，所以“所有浏览器”至少指的是最新版本的Firefox、Opera和Safari）？也许我忘记定义什么了吗？

编辑：我还注意到使用<object>标签时，SVG在Firefox中是透明的，但在Safari中不透明... :( 是否有一种“标准”的方式来包含SVG？

感谢您的帮助。

- ThibThib

1

谢谢你的问题。这帮助我很多，解决了我的SVG文件跨浏览器支持问题。可惜支持不够一致。 - Richard Garside

顺便提一下，解释浏览器渲染SVG文件差异的另一个因素是letter-spacing属性。目前Firefox不支持该属性，请参见https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/letter-spacing#Usage_Note - Fabien Snauwaert

2个回答

0

如果您正在使用svgweb来呈现SVG的IE版本，那么您可以在大多数浏览器中实现相同的行为。这假定您的SVG不是交互式的（包含JavaScript），否则它需要嵌入到任何浏览器中。

<html>
  <head>
    <!--[if IE]>--><script type="text/javascript" src="javascripts/svg/svg.js"></script><!--<![endif]-->
  </head>
  <body>
    <div id="map_canvas" style="width: 900px; height: 900px">
      <!--[if !IE]>--><img src="test.svg" width="900" height="900" /><!--<![endif]-->
      <!--[if lt IE 9]><object src="test.svg" classid="image/svg+xml" width="900" height="900"></object><![endif]-->
      <!--[if gte IE 9]><object data="test.svg" type="image/svg+xml" width="900" height="900"></object><![endif]-->
    </div>
  </body>
</html>

- Martin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- räph · Accepted Answer

当在svg中定义了viewbox时，仅在Firefox和Safari（在Windows上）之间会出现大小不同的结果。

解决方法是：

在html中的object标签中设置宽度和高度属性为绝对值（像素）
在svg文件中设置宽度和高度属性为相对值（例如100%）

这样Firefox和Safari就会显示相同的行为！如果适用于您的情况，请尝试一下。

编辑：关于您的新问题： - Safari中的透明度似乎是一个错误：Webkit bugs - 嵌入的标准方式：我认为没有标准方式。你可以使用对象、iframe、img或svg（内联声明）。

如果你想让它在每个浏览器中都能工作，你可能需要使用浏览器嗅探，并根据浏览器使用对象或img标记。或者你可以尝试使用iframes，因为它们应该在Safari和Firefox中具有透明背景。（但是不知道Opera）

像在Web开发中一样，浏览器支持是一个大问题，可以在这里看到：SVG支持（当你点击图片时，可以详细检查svg功能）。