SVG 仅在 Firefox 中部分显示答案

【问题标题】：SVG only shown partially in FirefoxSVG 仅在 Firefox 中部分显示
【发布时间】：2012-10-30 09:41:39
【问题描述】：

我目前正在使用 SVG 格式的瑞士地图。 <svg> 标签直接嵌入在 <div> 中。

在 Chromium (Linux) 中，一切看起来都很好，但在 Firefox (Linux) 中，只显示了 SVG 的一部分。 SVG 标记本身似乎是有效的。

铬：

火狐：

我用源代码创建了一个 jsfiddle 以便于测试：http://jsfiddle.net/MKRXN/

这是 Firefox 的问题，还是 SVG 的问题？无论如何，我怎样才能让它正常工作？

【问题讨论】：

我猜你需要为 Firefox 指定图片尺寸。

标签： firefox svg rendering

【解决方案1】：

您应该将height 和width 设置为您的父级div，然后将svg 的高度和宽度设置为100%：

HTML：

<div id="map" style="height: 500px;width:600px;">

SVG：

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.0"
   id="svg_main" style="height: 100%;width: 100%">

查看此代码：http://jsfiddle.net/Kgs6J/

【讨论】：

很好，谢谢！ :) 我之前尝试设置容器 div 的高度/宽度，但缺少 svg 元素的 100% 设置，这就是为什么它一开始对我不起作用的原因。
@DaniloBargen 是的，这是因为您应该将svg 的width 和height 设置为100%，以便将父元素大小设置为子元素。
另外，你可以给你的 SVG 一个有用的固有尺寸，这样浏览器就不会默认它为 CSS 定义的替换元素默认尺寸。