代码之家 › 专栏 › 技术社区 › ThibThib

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

opera svg safari firefox html

ThibThib · 技术社区 · 15 年前

我开始对我以前的问题有了解决办法 Overlay SVG diagrams on google map .

但我还有一个小问题。我使用的是Firefox3.5和Safari4(在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 定义。

有没有一种方法可以在所有浏览器中获得相同的结果(我不在乎IE不支持SVG…,所以“所有浏览器”至少意味着最新版本的Firefox、Opera和Safari)?可能是我忘了定义的东西?

编辑:我也注意到 <对象& ,SVG在FF中是透明的,但在Safari中不是透明的…:( 是否有包括SVG的“标准”方法??

谢谢你的帮助

2 回复 | 直到 10 年前

harriyott Erik Funkenbusch 10 年前

只有当SVG中定义了一个viewbox时,我才能在Firefox和Safari(在Windows上)之间获得不同的大小结果。

解决办法是

将HTML中的对象标记的宽度和高度属性设置为绝对值(像素)
将SVG文件中的“宽度和高度”属性设置为相对值(例如100%)。

然后,FF和Safari都表现出相同的行为!如果这适用于您的情况,您应该尝试这个方法。

编辑:关于您的新问题: -Safari的透明度似乎是一个缺陷: bugs Webkit -嵌入的标准方法:我认为没有标准方法。可以使用object、iframe、img或svg(内联声明)。

如果你想让它在每一个浏览器中工作,你可能必须使用浏览器嗅探和使用对象或img标签,这取决于浏览器。或者你应该试试iframes。因为他们应该在Safari和Firefox中有透明的背景。(但不懂歌剧)

就像Webdev浏览器中始终存在的那样,支持是一个大问题,正如您在这里看到的: svg support (单击图像时,可以详细检查SVG功能)

Martin 13 年前

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