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具有指定的width和height 。 如果您是从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