Question

我开始为上一个问题Overlay SVG diagrams on google map提供解决方案。

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

我可以使用<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对FF是透明的，但对Safari不透明...... :( 是否有一种“标准”方式来包含SVG ??

感谢您的帮助

Answer 1

在svg中定义了一个视图框时，我只能在Firefox和Safari（在Windows上）之间获得不同的大小结果。

解决方案是

将html中object标签中的width和height属性设置为绝对值（pixel）
将svg文件中的width和height属性设置为相对值（例如100％）

然后FF和Safari显示相同的行为！如果这适用于您的情况，您应该尝试这样做。

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

如果您希望它在每个浏览器中都有效，您可能必须使用浏览器嗅探并根据浏览器使用对象或img标记。或者你应该尝试iframe。因为它们应该在safari和firefox中具有透明背景。（但不知道歌剧）

就像在webdev中一样，浏览器支持是一个大问题，正如您在此处看到的那样：svg support（当您单击图像时，可以详细检查svg功能）

Answer 2

如果您使用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>

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

2 个答案: