带有viewBox和width的SVG在IE中没有正确缩放高度 [英] SVG with viewBox and width is not scaling height correctly in IE

问题描述

我试图用viewBox属性构造内联SVG，但没有显式的宽度或高度属性。我使用CSS设置SVG的宽度为100％。这应该让SVG缩放到其包装容器，维持由viewBox设置的宽高比。

I'm trying to construct inline SVGs with viewBox attributes, but no explicit width or height attributes. I'm setting the SVG's width to 100% using CSS. This should let the SVG scale to its wrapping container, maintaining the aspect ratio set up by the viewBox. In Chrome and Firefox, this works perfectly!

这里有一个关于我说的最小代码例子：
http://codepen.io/pcorey/pen/amkGl

Here's a minimal codepen example of what I'm talking about: 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;
}

viewBox是100x10。外部div设置为宽度为400px。这意味着SVG的高度应该是（和在Chrome / Firefox）40px。但在IE 11中，宽度为ALWAYS 150px（即使div的宽度超过1500px ...）

The viewBox is 100x10. The outer div is set to have a 400px width. That means that the SVG's height should be (and is in Chrome/Firefox) 40px. BUT, in IE 11, the width is ALWAYS 150px (even when the div's width exceeds 1500px...)

有没有一个很好的方法来解决这个在IE？为什么IE不能正确处理未知的高度？我可以使用固有纵横比技巧，但这是超级难看的，需要另一个DOM元素，并要求我每次重新计算padding-top每次包装器调整大小。

Is there a nice way to fix this in IE? Why can't IE handle the unknown height correctly? I can use the "intrinsic aspect ratio" trick, but that is super ugly, requires another DOM element, and requires that I recompute the padding-top every time the wrapper resizes.

有关为什么我想这样做的更多信息，我写了一个快速博客about it： http://1pxsolidtomato.com/2014/10/08/quest- for-scalable-svg-text /

For more info on why I want to do this, I wrote a quick blog post about it: http://1pxsolidtomato.com/2014/10/08/quest-for-scalable-svg-text/

感谢您的帮助！

推荐答案

有些浏览器（IE和safari）将使用默认大小到SVG，如果你不放一定的高度和宽度。这是发生在这里。你是对的，内在方面的比例需要另一个Dom和css，如果我们能克服这个问题，会很好。

Some browsers(IE and safari) will be use a default size to SVG if you don't put a certain height and width. That what is happening here. You are right, the "intrinsic aspect ration" is requiring another Dom and css and will be nice if we can overcame this.

有一个解决方案，你可以计算并把正确的高度填充底部，这将给出你想要的正确的未知的高度。
您可以在这里看到一个完整的解决方案：
http://codepen.io/tomkarachristos / pen / GZPbgZ

There is a solution to this, you can calculate and put the right height to padding-bottom and this will give the right "unknown height" you want. You can see a full solution here: 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：

and 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(' '));
  });
});

这篇关于带有viewBox和width的SVG在IE中没有正确缩放高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！