Internet Explorer 不支持 SVG 百分比宽度答案

【问题标题】：Internet Explorer Not Honoring SVG Percentage WidthInternet Explorer 不支持 SVG 百分比宽度
【发布时间】：2014-02-20 23:49:00
【问题描述】：

以下 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

【问题讨论】：

只给 SVG 一个百分比高度
谢谢，但这并不是我的问题的真正解决方案。我正在创建一个矩形，并且我希望该矩形具有固定的纵横比；因为它比它的高度更宽，所以我更喜欢将大小固定为浏览器窗口的宽度。将宽度和高度都调整为窗口尺寸确实行不通。

标签： svg

【解决方案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 年永远不必做的事情——我也可以在页面上放一个讨厌的注释，告诉用户避开微软并获得一个真正的浏览器。

【讨论】：

【解决方案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

【讨论】：

这是一个可用的解决方法。很遗憾，这么多年后我们仍在与 IE 作斗争。
wth :D 那个解决方案，有人如何开始使用这个解决方案。无论如何，我从心底里感谢你！ :)
这类似于css-tricks.com/scale-svg 此处详述的“padding-bottom”hack 解决方法，我设法开始工作，而这个答案对我来说并不完全有效。

【解决方案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%"

【讨论】：

确实如此！此配置确实适用于 IE9 较新版本！

【解决方案4】：

您也可以将外部 svg 放入对象标签中，它会正确调整大小。

【讨论】：

【解决方案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 如何决定包含元素的“固定”高度是多少，我不知道。

【讨论】：

我很高兴您的项目在 IE11 中运行，但由于您认为的原因它无法运行。见jsfiddle.net/enry/qrqyd4an

【解决方案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>

【讨论】：

恐怕这行不通。首先，固定大小的 DIV 强制封闭的元素具有相同的固定大小；最外层 SVG 元素的要点是允许它们在调整浏览器窗口大小时调整大小，并保持固定的纵横比。在 Chrome 和 Firefox 中，使用您的方法，它们总是以相同的大小呈现。遗憾的是，在 IE 中，即使这样也不会发生，并且绘图以前面提到的相同的微小尺寸呈现（尽管保持纵横比和相对大小）。

【解决方案7】：

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

我发现this article 很有帮助

【讨论】：

这并不能真正回答 OP 的问题。
在某种程度上确实如此。我正在回答他问题的I'm not seeing anything particularly wrong here. Is this just another IE-specific failure, or have I missed something 部分。我的回答说他确实错过了一些东西，应该以不同的方式做。如果您仍然不同意，请告诉我如何编辑我的答案，使其成为您认为真正的“答案”。
OP 具体应该做些什么不同的事情？您建议他对标记进行哪些更改？