10

我开始为我之前的问题Overlay SVG diagrams on google map 找到解决方案。

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

我可以使用<object>or<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 的“标准”方式？？

感谢您的帮助

4

2 回答 2

6

当在 svg 中定义视图框时，我只会在 Firefox 和 Safari（在 Windows 上）之间得到不同的大小结果。

一个解决方案是

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

然后 FF 和 Safari 都表现出相同的行为！你应该试试这个，如果这适用于你的情况。

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

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

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

于 2009-07-02T05:55:40.303 回答
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>
于 2011-09-23T09:18:49.763 回答