IE9-10中SVG的背景大小

我有一个背景图像的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的宽度和高度有关。 如果我添加一个150像素的高度,SVG被正确渲染。 如果我使它更小(即100px)graphics开始收缩。

有没有人find一种方法来解决这个问题在资源pipe理器? 有没有办法告诉IE独立于div的宽度和高度使用背景大小的值?

确保您的SVG具有指定的widthheight 。 如果您是从Illustrator生成的,请确保“响应”框未选中,因为此选项将删除宽度和高度。

添加一个宽度和高度的SVG作为mbxtr说几乎为我工作。 我需要添加preserveAspectRatio="none slice"以及在IE中响应地工作。

那么,它看起来不是有解决scheme。 惊喜。 毕竟是IE。 我结束了使用下面的代码:

 div { padding: 20px; width: 150px; position: relative; } div:after { position: absolute; content: ""; width: 40px; height: 40px; top: 50%; right: 30px; margin-top: -20px; background-image: url('icon.png'); background-image: url('icon.svg'), none; } 

我更喜欢更清洁的版本,但是这个黑客适用于所有现代浏览器,包括IE8,9和10(可能11,但我没有testing)。

对我来说,这3个修复帮助:

  • 如果可能,将背景位置设置为“中心”
  • 对于背景大小设置两个值,“100%自动”不会做的伎俩,所以使用“100%100%”
  • 如果仍然无法将SVG自身的最后一个值改变为“viewBox”属性,并将其设置为比SVG的宽度和高度宽一个像素。 这会使SVG缩小一点,但是会阻止IE切断它,并且更小的尺寸根本不会被察觉。

我有这个问题,我发现要么删除svg的代码里面的高度宽度 ,但保持viewBox可以解决这个问题。

我build议使用一个编译器网站,如: https : //jakearchibald.github.io/svgomg/和设置选项“喜欢viewBox的高度和宽度”

如果这些都不起作用 ,请在Illustrator中尝试在svg图像周围应用方形背景,但在边缘留下足够的填充。

然后使用 – > data uri来导入样式表中的svg:…例如:

background-image:data-uri('image / svg + xml; charset = UTF-8','where / your / svg / is / located');

我们有一个SVG背景图像的类似问题,它不是一个包含元素的完整站点(例如searchinput左侧的放大镜)。

我们在Illustrator CC中创build了SVG,但是通过Peter Collingridge的SVG优化器运行它们来取出所有不必要的东西。 http://petercollingridge.appspot.com/svg-optimiser

我试过@ mbxtr的解决scheme

确保您的SVG具有指定的宽度和高度。 如果您是从Illustrator生成的,请确保“响应”框未选中,因为此选项将删除宽度和高度。

这仍然不适合我的Windows和Chrome浏览器。 我正在导出一个字体图标,所以如果你有一个字体,确保你导出为:

  • “字体:转换为轮廓”
  • “回应”是错误的

以防万一…

1. javascript

  drips.style.top = -dripsTop + "px"; var browser = window.navigator.userAgent; if (browser.indexOf("Trident") > 0) { $(".flow_space").css({"background":"url(../img/space2-ie.svg) no-repeat", "background-size":"100%"}); } 

  1. svg(原始高度= 1050)直接添加到自己svg文件preserveAspectRatio =“none”height =“2100”
Interesting Posts