在IE浏览器中，使用viewBox和width属性的SVG无法正确缩放高度。

Question

我将为您翻译以下内容，这是关于编程的：

我正在尝试使用viewBox属性构建内联SVG，但没有显式的宽度或高度属性。我使用CSS将SVG的宽度设置为100％。这应该使SVG缩放到其包装容器，保持viewBox设置的纵横比。在Chrome和Firefox中，这种方法完美地运行！

以下是一个最小化的CodePen示例，展示了我所说的内容： http://codepen.io/pcorey/pen/amkGl

HTML:

<div>
  <svg viewBox="0 0 100 10">
    <text x="1" y="9">hello</text>
  </svg>
</div>

CSS：

div {
  width: 400px;
}

svg {
  width: 100%;
  max-height: 100%;
  outline: 1px solid tomato;
}

text {
  font-size: 10px;
}

视口框的大小为100x10。外部div的宽度设置为400像素。这意味着SVG的高度应该是（在Chrome/Firefox中）40像素。但是，在IE 11中，宽度始终为150像素（即使div的宽度超过1500像素...）

有没有一种好的方法可以在IE中修复这个问题？为什么IE不能正确处理未知的高度？我可以使用“固有纵横比”技巧，但那太丑陋了，需要另一个DOM元素，并要求我每次重新计算包装器大小时都重新计算填充顶部。

关于我为什么要这样做的更多信息，我写了一篇简短的博客文章：http://1pxsolidtomato.com/2014/10/08/quest-for-scalable-svg-text/ 感谢您的帮助！

- pcorey

---

请看 SVG嵌入式内联使用<svg>标签 部分 http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/ - Ana

啊，没错，那个方法可行。我之前尝试过这样做，但是我使用的是像素填充计算。如果我改用百分比，它就完美地工作了。谢谢！ - pcorey

这篇文章在你提问时还不存在。它深入讲解了主题：如何缩放SVG。 - Mentalist

Answer 1

一个在所有浏览器中都适用的解决方法是向包含SVG的容器添加一个空白图片，该图片具有与SVG相同的尺寸：

.wrap {
  position: relative;
}
img {
  width: 100%;
  height: auto;
}
.viz {
  position: absolute;
  top: 0;
  left: 0;
}

<div class="wrap">
  <img src="img/blank.png" />
  <div class="viz">
    <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 1000 600"></svg>               
  </div>
</div>

在这种情况下，你的图片应该自然地具有1000像素宽和600像素高，并且是透明的（或与 .wrap 容器的背景匹配）。这将适当地调整 svg 坐落的容器的大小。.viz 元素的绝对位置将使其位于图片的顶部，利用其高度，以确保没有任何内容被裁剪。

- Taylor Plante

Answer 2

如果您不设定特定的高度和宽度，一些浏览器（如IE和Safari）将使用默认大小来显示SVG。这就是现在发生的情况。您是正确的，“内在宽高比”需要另一个Dom和CSS，如果我们能克服这个问题会很好。

有一个解决方法，您可以计算并设置正确的高度到padding-bottom属性中，这将为您提供所需的“未知高度”。您可以在这里看到完整的解决方案： http://codepen.io/tomkarachristos/pen/GZPbgZ

<!--
xMidYMin: Align the midpoint X value of the element's viewBox with the midpoint X value of the viewport.
slice : the entire viewport is covered by the viewBox and the viewBox is scaled down as much as possible,
height: if you dont set >= 1px some browsers will not render anything.
-->
<div>
    <svg viewBox="0 0 100 10" preserveAspectRatio="xMidYMin slice"
         width="100%" style="height: 1px;overflow: visible;
         /*without js:padding-bottom:55%*/"><text>hello</text>
  </svg>
    <svg viewBox="0 0 100 10" preserveAspectRatio="xMidYMin slice"
         width="100%" style="height: 1px;overflow: visible;"><text>Age</text>
  </svg>
</div>

以及 JavaScript：

/*
Here we do the hack.
With the math type: percent * height/width
we are adjust the total height of an element who is depend in width using the padding-bottom.
You can put an inline padding-bottom if you want in html.
*/

$(function() {
  $('svg').each(function() {
    var svg = $(this);
    var text = svg.find('text');
    var bbox = text.get(0).getBBox();
    //the hack
    var calcString = "calc(100% * " + bbox.height/bbox.width + ")";
    svg.css("padding-bottom",calcString);

    svg.get(0).setAttribute('viewBox',
                           [bbox.x,
                            bbox.y,
                            bbox.width,
                            bbox.height].join(' '));
  });
});

- Thomas Karachristos