Question

以下SVG在Windows和Linux上的Firefox和Chrome中都能很好地呈现。但是，在IE11中，渲染图形的整体尺寸很小 - 大约170像素宽 - 并且完全不响应浏览器窗口大小的变化，就像在其他浏览器中那样（并且应该）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><html>
<head>
   <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>

   <svg width="65%" viewBox="0 0 700 620" style="margin-left:auto; margin-right:auto;display:block;">
      <svg width="700" height="20" style="margin-left:auto; margin-right:auto;display:block;">
         <rect width="100%" height="100%" style="fill:rgb(128,128,255);stroke-width:1px;stroke:rgb(0,0,0);" />
      </svg>

      <svg width="700" height="600" y="20" viewBox="0 0 700 600" style="margin-left:auto; margin-right:auto;display:block;">
         <rect width="100%" height="100%" style="fill:rgb(255,200,255);stroke-width:1px;stroke:rgb(0,0,0);" />
         <rect width="100" height="100" x="0" y="0" style="fill:rgb(255,255,200);stroke-width:1px;stroke:rgb(0,0,0);" />
      </svg>
   </svg>

</body>
</html>

（抱歉内联样式;只是试验，这样更快）

我对SVG有些新意，我在这里没有看到任何特别的错误。这只是IE特定的另一个失败，还是我错过了什么？

注意：已添加jsfiddle link

Answer 1

因此，事实证明，这是看似无休止的Internet Explorer无法遵守简单，广泛的标准的另一个游行。我可以把它简化为一个简单的例子：

<!DOCTYPE html>

<body>
   <svg width="65%" viewBox="0 0 700 600">
      <rect width="100%" height="100%" style="fill:rgb(255,100,255);stroke-width:1px;stroke:rgb(0,0,0);" />

   </svg>
</body>

在任何真正的浏览器中，这将正确绘制一个粉红色矩形，其宽度为浏览器窗口宽度的65％，宽高比为700w x 600h;更改窗口大小将改变矩形大小。

在Internet Explorer中，这简单地失败了，并绘制了一个小矩形 - 尽管具有适当的宽高比 - 大约170像素宽。谁知道它的尺寸在哪里？无论它来自何处，它都是固定的，并且不受浏览器大小调整的影响。这是关于SVG文档的失败，Firefox，Chrome以及地球上可能的所有其他浏览器都设法兑现。

与往常一样，解决方法是在遇到IE时定义降级的固定大小的SVG标记，例如

<svg width="700mm" height="600mm"...>

并失去了非常想要的调整大小功能。而且，我想，只要我困扰着辨别哪个浏览器正在发挥作用 - 这是我在2014年永远不应该做的事情 - 我也可以在页面上删除一个令人讨厌的注释，告诉用户避开微软并得到一个真正的浏览器。

Answer 2

不是在SVG元素本身上设置％宽度，而是将SVG分别包含在两个嵌套的div标签中，其中css类分别为“svg-flex”和“svg-flex-inner”。使用图形所需的百分比设置外部元素的宽度，而不是直接在SVG元素上设置它。确保您的SVG元素宽度为100％。

<div class="svg-flex" style="width: 50%;">
    <div class="svg-flex-inner" style="width: 50%; position: relative; padding-top: 100%;">
        <svg style="width: 100%; height: 100%; position: absolute; margin-top: -100%;">
            <!-- Whatever you want here -->
        </svg>
    </div>
</div>

您可以将这些样式添加到页面

，而不是内联css

.svg-flex-inner {
  position: relative;
  padding-top: 100%;
}

.svg-flex svg {
  position: absolute;
  margin-top: -100%;
  width: 100%;
  height: 100%;
}

现在，您可以通过修改外部“svg-flex”元素的宽度来控制SVG的宽度。

如果你的元素不是一个完美的正方形，那么你需要使用以下公式调整padding-top和margin-top值：

(100 * height / width) %.

因此，对于16：9图形，比率为100 * 9/16 = 56.25％

padding-top: 56.25%;
...
margin-top: -56.25%

<强> Here's the fiddle

Answer 3

此百分比svg适用于IE 11 如果您在http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic

上进行测试

<!DOCTYPE html>
<HTML style="width:100%; height: 100%">
<body style="width:100%; height: 100%">
   <svg width="65%" viewBox="0 0 700 600" height ="100%">
      <rect width="100%" height="100%" style="fill:rgb(255,100,255);stroke-width:1px;stroke:rgb(0,0,0);" />

   </svg>
</body>
</HTML>

我也应该在旧版本上进行测试，最奇怪的变化是将<html>和<body>设置为"width:100%; height: 100%"

Answer 4

您还可以将外部svg放入对象标记中，并且可以正确调整其大小。

Answer 5

根据我的经验，IE11不会缩放内联SVG图形，如果增加填充包含元素的宽度也会增加包含元素的高度，即使包含元素不是固定高度。

在我目前的使用案例中（大量使用flexbox）我通过设置

解决了这个问题

align-items: stretch;

而不是

align-items: center;

在我的包含元素上。

我的标记看起来像这样：

<section class="container">
  <div class="cell">{LOTS OF TEXT</div>
  <figure class="cell">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">
        ...
    </svg>
  <figure>
</section>

我的CSS（实际上是Less）看起来像这样：

.container {
  width: 70%;
  max-width: 1600px;
  display: flex;
  align-items: stretch;
  > figure {
    margin: 0 20px 0 0;
    > svg {
      width: 100%;
    }
  }

  > .cell {
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex: 1 0 0px;
  }
}

当然，根据您的实现，您可能需要另一种解决方案来扩展包含元素。

IE如何决定包含元素的“固定”高度，我不知道。

Answer 6

使用HTML5并将svg放入DIV中，如下所示。所有浏览者都可以

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
<div style="width:700px;height:620px">
   <svg width="65%" viewBox="0 0 700 620" style="margin-left:auto; margin-right:auto;display:block;">
      <svg width="700" height="20" style="margin-left:auto; margin-right:auto;display:block;">
         <rect width="100%" height="100%" style="fill:rgb(128,128,255);stroke-width:1px;stroke:rgb(0,0,0);" />
      </svg>

      <svg width="700" height="600" y="20" viewBox="0 0 700 600" style="margin-left:auto; margin-right:auto;display:block;">
         <rect width="100%" height="100%" style="fill:rgb(255,200,255);stroke-width:1px;stroke:rgb(0,0,0);" />
         <rect width="100" height="100" x="0" y="0" style="fill:rgb(255,255,200);stroke-width:1px;stroke:rgb(0,0,0);" />
      </svg>
   </svg>
</div>
</body>
</html>

Answer 7

理论上，SVG的内容不应该知道它之外的内容。这尤其意味着它不应该知道其父元素的宽度。 SVG旨在作为绘图画布，您应将所有位置和尺寸指定为像素。

我发现this article有用了

Internet Explorer不支持SVG百分比宽度

7 个答案: