SVG的背景大小在IE9-10中被压缩

Question

我有一个带背景图片的div集:

<div>Play Video</div>

使用以下CSS:

div {
background-image: url('icon.png');
background-image: url('icon.svg'), none;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 90% 50%;
padding: 20px;
width: 150px;
}

背景大小在Firefox,Safari和Chrome中得到尊重.在IE8中,SVG由PNG文件替换.但是,在IE9和IE10中,SVG文件的大小很小.这个问题似乎与div的宽度和高度有关.如果我添加150px的高度,SVG将正确呈现.如果我把它缩小(即100px),图形就开始缩小.

有没有人找到办法在资源管理器中解决这个问题？有没有办法告诉IE使用背景大小值独立于div的宽度和高度？

Answer 1

确保您的SVG有一个width和height指定.如果要从Illustrator生成它,请确保取消选中"响应"框,因为此选项会删除宽度和高度.

Answer 2

添加宽度和高度到SVG,因为mbxtr说几乎为我工作.我需要添加preserveAspectRatio="none slice"以使其在IE中响应性地工作.

Answer 3

对我来说，这 3 个修复有帮助：

• 如果可能，将背景位置设置为“中心”
• 对于 background-size 设置两个值，“100% auto”不会成功，所以使用“100% 100%”
• 如果这仍然无助于将最后一个值更改为 SVG 本身的“viewBox”属性，并使其比 SVG 的宽度和高度宽和高一个像素。这会稍微缩小 SVG，但会阻止 IE 将其切断 - 并且根本不会注意到较小的尺寸。