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

Posted

技术标签:

【中文标题】在 IE9-10 中压缩 SVG 的背景大小【英文标题】:Background-size with SVG squished in IE9-10 【发布时间】:2014-03-17 10:13:38 【问题描述】:

我有一个带有背景图片的 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 会正确呈现。如果我把它变小(即 100 像素),图形就会开始缩小。

有没有人在资源管理器中找到解决此问题的方法?有没有办法告诉 IE 独立于 div 的宽度和高度使用 background-size 值?

【问题讨论】:

好问题,这种情况发生了很多次。 【参考方案1】:

我将所有 SVG 更改为在 Illustrator 中不响应,但无济于事。

因为我正在寻找代码示例,所以我错过了正确答案,当说“确保您的 SVG 具有指定的宽度和高度”时,他们的意思是这种事情:

    .my-class 
        background-size: 200px 100px;
    

如果 IE 与 Chrome 中的大小有点偏差,例如,我使用媒体查询来定位 IE:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) 
    .my-class 
        background-size: 200px 110px;
    

【讨论】:

【参考方案2】:

Svg 背景图片大小将使用这些属性在 IE 和 Chrome 上呈现相同

background: #ffffff url("images/calendar.svg") no-repeat;
border: 1px solid #dddddd;
float: left;
margin: 0;
overflow: hidden;
background-size:15px 15px;

【讨论】:

【参考方案3】:

我遇到了这个问题,我发现删除 svg 代码中的 heightwidth 但保留 viewBox 可以解决问题。

我建议使用编译器站点,例如:https://jakearchibald.github.io/svgomg/ 并将选项设置为 "prefer viewBox over height and width"

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

然后使用 --> data uri: ... 在样式表中导入 svg 示例:

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

【讨论】:

这是一个很棒的网站。感谢分享。 非常好的工具!【参考方案4】:

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%");
  

    svg(原始高度=1050) 直接添加到自己的svg文件中 preserveAspectRatio="none"

【讨论】:

【参考方案5】:

我尝试了@mbxtr 的解决方案

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

这对我在 Windows Chrome 和 IE 上仍然不起作用。 我正在导出字体图标,因此如果您有字体,请确保将其导出为:

“字体:转换为轮廓” 并且“响应式”是错误的

我也取消选中“缩小”以防万一......

【讨论】:

【参考方案6】:

为 SVG 添加宽度和高度,正如 mbxtr 所说,几乎对我有用。我还需要添加 preserveAspectRatio="none slice" 以使其在 IE 中响应式工作。

【讨论】:

preserveAspectRatio="none slice" 添加到实际 svg 文档中的 标记刚刚为我解决了这个问题!谢谢你的建议。【参考方案7】:

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

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

【讨论】:

【参考方案8】:

对于不是包含元素的完整站点的 SVG 背景图像(例如搜索输入左侧的放大镜),我们遇到了类似的问题。

我们已经在 Illustrator CC 中创建了 SVG,但通过 Peter Collingridge 的 SVG 优化器运行它们以消除所有不必要的杂乱无章。 http://petercollingridge.appspot.com/svg-optimiser

【讨论】:

【参考方案9】:

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

【讨论】:

我遇到了同样的问题。所以我们用编辑器打开了 svg。和 mbxtr 一样,illustrator 在 标签中生成没有宽度、高度属性的 svg。你可以重新创建你的 SVG here 这也为我做了。我在编辑器中打开了 SVG,并将 viewBox 属性中的最后两个值复制/粘贴到宽度和高度属性中。所以,之前: 和之后: 我的问题需要我删除 SVG 代码的高度和宽度值 FWIW。 YMMV 我猜,添加宽度和高度属性对我不起作用。 IE10 似乎仍然不知道“覆盖”是什么意思,它的行为就像“包含”。 @gunnx 这在 IE 中为我解决了这个问题,使用 SVG 作为响应容器中的背景图像,背景大小设置为“覆盖”。【参考方案10】:

好吧,看起来没有解决方案。惊喜惊喜。毕竟是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;

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

【讨论】:

其中的 hack 是什么?你能解释一下吗? 我认为他在不同的浏览器上使用不同的图标.. 不适合所有人

以上是关于在 IE9-10 中压缩 SVG 的背景大小的主要内容,如果未能解决你的问题,请参考以下文章

试图在 python 中压缩一些文件。但是大小并没有被压缩。

使用 PIL 在 Python 中压缩 PNG 图像

我如何在 React js 中压缩任何图像以及 Excel 和 CSV 文件

(DELPHI)已经存入SQLSERVER中的图片数据(image字段)太大,怎么直接在数据库中压缩?或怎么用程序实现

Windows7中压缩卷后变为黑色的未分配空间如何变为绿色的可用空间

在python中压缩文件