在 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 代码中的 height 和 width 但保留 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 指定了 width
和 height
。如果您从 Illustrator 生成它,请确保未选中“响应式”框,因为此选项会删除宽度和高度。
【讨论】:
我遇到了同样的问题。所以我们用编辑器打开了 svg。和 mbxtr 一样,illustrator 在 这也为我做了。我在编辑器中打开了 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 中压缩一些文件。但是大小并没有被压缩。
我如何在 React js 中压缩任何图像以及 Excel 和 CSV 文件
(DELPHI)已经存入SQLSERVER中的图片数据(image字段)太大,怎么直接在数据库中压缩?或怎么用程序实现