Internet Explorer不支持SVG百分比宽度_Svg

Internet Explorer不支持SVG百分比宽度

svg

Internet Explorer不支持SVG百分比宽度,svg,Svg,以下SVG在Firefox和Chrome中，在Windows和Linux上都能很好地呈现。然而，在IE11中，渲染图形的总体大小很小（大约170像素宽），并且完全不响应浏览器窗口大小的变化，就像在其他浏览器中一样（也应该如此）： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xm

以下SVG在Firefox和Chrome中，在Windows和Linux上都能很好地呈现。然而，在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特有的失败，还是我错过了什么

注意：添加了使用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>

因此，这是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；更改窗口大小将更改矩形大小

在InternetExplorer中，这完全失败了，并绘制了一个约170像素宽的小矩形（尽管具有适当的纵横比）。谁知道它是在哪里推出这种尺寸的？无论它来自哪里，它都是固定的，不受浏览器大小调整的影响。对于SVG文档来说，这是一个失败，Firefox、Chrome，可能还有地球上其他所有浏览器都能做到这一点

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

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

并失去了人们所期望的调整大小功能。而且，我想，只要我费心辨别哪种浏览器在发挥作用——这是我在2014年绝对不应该做的事情——我也可以在页面上写一条令人讨厌的便条，告诉用户远离微软，买一个真正的浏览器。

这个百分比svg在IE 11上确实有效
如果你在电脑上测试的话

我还应该在旧版本上测试它，最奇怪的变化是将

和

设置为

“宽度：100%；高度：100%”

您还可以将外部svg放在对象标记中，它将正确调整大小。

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

我发现这很有帮助

与其在SVG元素本身上设置%width，不如将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>

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

如果元素不是完美正方形，则需要使用以下公式调整填充顶部和边距顶部值：

(100 * height / width) %.

因此，对于16:9的图形，比率为100*9/16=56.25%

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

根据我的经验，如果增加填充包含元素的宽度也会增加包含元素的高度，即使包含元素不是固定高度，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>

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

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

恐怕这不起作用。首先，固定大小DIV强制封闭的元素保持相同的固定大小；最外面的SVG元素的要点是允许它们在浏览器窗口调整大小时调整大小，并保持固定的纵横比。在Chrome和Firefox中，使用您的方法，它们总是以相同的大小渲染。不幸的是，在IE中，甚至这种情况都没有发生，并且图形以前面提到的相同、微小的尺寸呈现（尽管保持了纵横比和相对尺寸）。的确如此！此配置在IE9和更高版本上确实有效！只需给SVG一个百分比高度谢谢，但这并不是我问题的真正解决方案。我正在创建一个矩形，我希望这个矩形有一个固定的纵横比；因为它比它的高宽，所以我更喜欢将大小固定到浏览器窗口的宽度。让宽度和高度都根据窗口尺寸进行调整是行不通的。这并不能真正回答OP的问题。从某种程度上说，这是行不通的。我在回答

我没有发现什么特别的错误。这只是另一个IE特有的失败，还是我遗漏了他问题的某个部分。我的回答是，他确实错过了一些东西，应该采取不同的做法。如果您仍然不同意，请让我知道如何编辑我的答案，使其成为您认为真正的“答案”。OP应具体做哪些不同的事情？您建议他对标记做什么更改？这是一个有用的解决方法。遗憾的是，这么多年来，我们仍在与IE进行斗争。这个解决方案是什么，有人是如何做到的。无论如何，我从心底里感谢你！：）这类似于这里详细介绍的“填充底部”黑客解决方法，我成功地解决了这个问题，而这个答案对我来说并不完全有效。我很高兴你的项目在IE11中运行，但它不起作用
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>

.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;
  }
}