SVG仅在Firefox中部分显示 [英] SVG only shown partially in Firefox

问题描述

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

I'm currently working with a Swiss map in SVG format. The <svg> tag is directly embedded inside a <div>.

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

In Chromium (Linux), everything just looks fine, but in Firefox (Linux) only a part of the SVG is shown. The SVG markup itself seems to be valid.

为了方便测试，我创建了带有源代码的jsfiddle: http://jsfiddle.net/MKRXN/

I created a jsfiddle with the source code for easier testing: http://jsfiddle.net/MKRXN/

这是Firefox问题，还是SVG有问题?无论如何，如何使它正常工作?

Is this a Firefox issue, or is it some problem with the SVG? In any case, how can I get this to work correctly?

推荐答案

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

You should set height and width to your parent div and then set the svg both height and width to 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/

这篇关于SVG仅在Firefox中部分显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！