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

Question

我开始在谷歌地图上为我之前的问题覆盖SVG图解决方案.

但我有另一个(较小的)问题.我正在使用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中的透明度似乎是一个错误:错误Webkit - 嵌入的标准方式:我认为没有标准方法.你可以使用object,iframe,img或svg(内联声明).

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

像webdev一样,浏览器支持是一个大问题,你可以在这里看到:svg支持(当你点击图像时,你可以详细检查svg功能)