Question

以下代码段说明了我的问题：

<style>
div {
  background-color: #00FF00;
  width: 80px;
}
svg {
  background-color: #FF0000;
  vertical-align: top;
  width: 100%;
  height: auto; // PROBLEM
}
rect { fill: #0000FF; }
</style>
<div>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
    shape-rendering="geometricPrecision"
    text-rendering="geometricPrecision"
    image-rendering="optimizeQuality"
    fill-rule="evenodd"
    clip-rule="evenodd"
    preserveAspectRatio="xMidYMid meet"
    width="100"
    height="100"
    >
    <rect width="90" height="90" x="5" y="5" />
  </svg>
</div>

SVG应该是一个红色正方形（绘制一个蓝色方块），它在保持其纵横比的同时相对于其父div标记缩小。以上示例适用于Firefox，Chrome（适用于桌面和Android），Safari和Edge。它呈现一个80x80px的红色方块：

只有 Internet Explorer 10和11将SVG垂直拉伸到预期高度的两倍，所以80x160px：

如果我删除/评论＆＃34; height：auto＆＃34; SVG缩放到80x100px样式表中的语句。然而，这打破了Chrome，在这种情况下，它也将SVG扩展到80x100px。 Firefox和Edge似乎能够处理删除此声明。

有趣的是，SVG中多边形等的纵横比总是完美地保持，检查蓝色方块，而多边形通常在被拉伸的SVG的垂直中心绘制。它是＆＃34; SVG-container＆＃34; / SVG-tag，它会导致麻烦并消耗更多的空间。

如何解决此跨浏览器？

我构建了一个小的 JSFiddle 来证明这个问题。

有一个密切相关的问题，名为＆＃34; SVGs not scaling properly in IE - has extra space＆＃34;。 关键区别在于我实际上直接在svg-tag中提供了宽度和高度，我需要做for Android browser compatibility 。尽管如此，IE还是破了Paul LeBeau描述的画布方法似乎遵循不同的假设。

此问题是以下旧问题的变体，但不完全相同：

以下要点很有意思，但也没有帮助：

Fix SVG in tags not scaling in IE9, IE10, IE11（它真的是关于img-tags中的SVG，删除SVG标记中的宽度和高度参数对我来说不起作用）

有一种称为＆＃34; padding hack＆＃34;的方法，在此描述：

Answer 1

这个答案仅供参考 - 我仍然在寻找一种更好，更简单（也不那么愚蠢）的方法。

好的，按照＆＃34; padding hack＆＃34;的行，以下内容似乎适用于各种浏览器：

<style>
div#outer {
  background-color: #00FF00;
  width: 80px;
}
div#container {
  position: relative; 
  height: 0; 
  width: 100%; 
  padding: 0;
  padding-bottom: 100%; /* 100% * height/width */
}
svg {
  background-color: #FF0000;
  position: absolute; 
  height: 100%; 
  width: 100%; 
  left: 0; 
  top: 0;
}
rect { fill: #0000FF; }
</style>
<div id="outer">
  <div id="container">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 100 100"
      shape-rendering="geometricPrecision"
      text-rendering="geometricPrecision"
      image-rendering="optimizeQuality"
      fill-rule="evenodd"
      clip-rule="evenodd"
      preserveAspectRatio="xMidYMid meet"
      width="100"
      height="100"
      >
      <rect width="90" height="90" x="5" y="5" />
    </svg>
  </div>
</div>

还有一个更新的JSFiddle。

Answer 2

另一种解决方法是填充底部hack（填充底部：宽度/高度* 100）这是一个具有响应性svg-clippath和ie11 + up支持的示例

<svg class="clipper" width="0" height="0">
    <defs>
        <clipPath id="clippath" clipPathUnits="objectBoundingBox" transform="scale(0.01, 0.01136364)">
            <path d="M78.24,5.09S75.53.46,70.15.46H29.85s-5.38,0-8.09,4.63L1.66,39.37S-1,44,1.66,48.63l20.1,34.28s2.71,4.63,8.09,4.63h40.3s5.38,0,8.09-4.63l20.1-34.28s2.71-4.63,0-9.26Z"></path>
        </clipPath>
    </defs>
</svg>      

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 88" preserveAspectRatio="xMidYMin slice" style="width: 100%; padding-bottom: 88%; height: 1px; overflow: visible">>
      <image xlink:href="http://www.domain.de/image-with-aspect-ratio-100-88.jpg" x="0" y="0" height="100%" width="100%" style="clip-path: url(#clippath);">
      </image>
  </svg>

如何在IE（和其他浏览器）中保留内联SVG的宽高比？

2 个答案: