IE11中SVG周围的空白问题,与SVG中的文本有关
Wil*_*iam 5 html svg internet-explorer-11
我在Internet Explorer中遇到SVG周围的大量空白问题.我创建了一个可以重现问题的最简单的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
svg {
border: 1px solid red;
}
</style>
</head>
<body>
<svg width="600" height="600" viewbox="0 0 600 600">
<rect fill="powderblue" x="0" y="0" width="600" height="600"/>
<text x="500" y="500">test</text>
</svg>
</body>
</html>在IE11中查看此内容会在SVG的右侧和下方产生大量空白.请注意下面屏幕截图中的滚动条,表示IE中有大量空白空间,但Chrome中没有.
如果我执行以下任何操作,则空格会消失:
- 删除viewbox属性
- 将文本进一步移动到右上角
- 删除文本(不必删除文本标签,只删除内容)
作为一个实验,我在SVG下面添加了一个段落,看看空格是否会取代段落.该段直接出现在SVG下方 - 它没有被空白所取代.
知道我怎么能解决这个问题,以便不出现空白？
这显然是IE的一个bug。overflow: hidden一种简单的解决方法是在 SVG 上设置。
svg {
overflow:hidden;
}<svg width="600" height="600" viewbox="0 0 600 600">
<rect fill="powderblue" x="0" y="0" width="600" height="600"/>
<text x="500" y="500">test</text>
</svg>| 归档时间： |
|
| 查看次数： |
1152 次 |
| 最近记录： |