带有viewBox和width的SVG在IE中未正确缩放高度
SVG with viewBox and width is not scaling height correctly in IE
我试图用viewBox属性构建内联SVG,但没有显式的宽度或高度属性。我正在使用CSS将SVG的宽度设置为100%。这应该允许SVG缩放到其包装容器,同时保持viewBox设置的纵横比。在Chrome和Firefox中,这是完美的!
以下是我所说内容的一个最简单的代码笔示例: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/FFirefox中)40px。但是,在IE 11中,宽度总是150px(即使div的宽度超过1500px…)
有没有一种很好的方法可以在IE中解决这个问题?为什么IE不能正确处理未知高度?我可以使用"内在纵横比"技巧,但这非常难看,需要另一个DOM元素,并且每次包装器调整大小时都需要重新计算填充顶部。
关于我为什么要这么做的更多信息,我写了一篇关于它的快速博客文章:http://1pxsolidtomato.com/2014/10/08/quest-for-scalable-svg-text/
谢谢你的帮助!
一个适用于所有浏览器的解决方法是向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>
在这种情况下,您的图像应该具有1000px乘600px的自然尺寸,并且是透明的(或者与.wrap容器的背景相匹配)。这将适合svg所在的容器的大小。.viz元素的绝对位置将允许它坐在图像的顶部,利用它的高度,这样就不会有任何东西被截断。
如果不设置特定的高度和宽度,某些浏览器(IE和safari)将使用SVG的默认大小。这就是这里正在发生的事情。你是对的,"内在方面比率"需要另一个Dom和css,如果我们能克服这一点,那就太好了。
有一个解决方案,你可以计算并将正确的高度放在填充底部,这将给出你想要的正确的"未知高度"。您可以在此处看到完整的解决方案: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(' '));
});
});
- 调整缩放窗口高度提升缩放
- 自动缩放图像以匹配文本高度
- 当只给定宽度或高度时,是否所有浏览器都按比例缩放图像
- 如何计算缩放后画布的新高度和宽度
- 量角器获取元素的比例或缩放的宽度和高度
- 根据浏览器的宽度/高度在页面上进行自动缩放,就像 Firefox 所做的 CTR+- 一样
- 使用 Java 脚本获取图像的缩放宽度和高度
- 根据宽度或高度的最高值缩放图像固定量
- 获取缩放变换元素的实际高度
- 带有viewBox和width的SVG在IE中未正确缩放高度
- D3使用滚动条进行缩放,滚动条宽度和高度可根据缩放比例进行调整
- 使用CSS3缩放后,获得元素的实际宽度和高度
- 我每隔几秒钟就会改变图像,同时也会以100%的高度和宽度响应缩放图像
- FabricJS toDataURL倍增器没有返回正确的高度/缩放正确
- 变换(缩放)与简单的宽度/高度和左/顶部位置
- 获得缩放图像的高度
- SVG高度缩放不符合预期
- 基本Js函数缩放两个DIV's高度
- 如何缩放适合高度固定大小的孩子在屏幕css只允许javascript
- Jquery where's我的错误使用.css()缩放最小高度到窗口高度