[英]SVG with width/height doesn't scale on IE9/10/11
IE 9/10/11 存在一个已知问题,如果您有一个 SVG 文件,其中<svg>
元素指定宽度和高度,然后使用<img>
标签的width
和height
属性缩放 SVG 图像, IE 无法正确缩放图像。
我遇到了这个问题。 我有一系列 SVG 标志图标。 对于美国国旗图标,SVG 对象写为:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640">
<!-- elements to draw flag .. -->
</svg>
我将 SVG 插入带有<img>
标签的 HTML 文档中,并将其缩小到 20x15:
在 Chrome 39 上,SVG 正确呈现如下:
但是在 IE10 上,它呈现如下:
所以,这里似乎发生的事情是,即使 IE10 将<img>
元素的大小设置为 20x15,它也不会缩小 SVG - 所以我们最终只看到标志图标的左上角,它显示为普通的蓝色盒子。
好的......所以这似乎是一个已知的问题,有记录的解决方案。 一种解决方案是简单地删除 SVG 文件中的所有width
和height
属性。 这似乎有点危险,因为我不想搞砸实际的设计。 如果您有很多 SVG 文件,这样做也有点麻烦——需要更多的脚本来处理这些文件。
更好的解决方案是使用 CSS 专门针对 IE10 中的 SVG 元素,这显然可以使用供应商特定的媒体查询:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
img[src*=".svg"] {
width: 100%;
}
}
好的,但我不明白这个解决方案。 当我尝试上述操作时,IE10 只是将 SVG 的大小扩展以填充整个父容器,这不是我想要的。 好的,所以也许我可以通过将 SVG 宽度设置为 100% 来强制 IE 缩放 SVG,然后限制父容器的大小。 所以我将<img>
包裹在一个宽度和高度为 20x15 的 DIV 中。 但是......这只是导致了与以前相同的问题:容器 DIV 固定为 20x15,但 SVG 没有缩小 - 所以我们最终得到的只是标志的左上角和以前一样:
...所以,我可能只是不了解有关此解决方案的某些内容。 如何让 IE10/11 将标志图标缩小到 20x15?
当您的图像缺少svg
元素上的viewBox
属性时,就会发生这种情况。
你的应该设置为: 0 0 640 480
。 零是 X 和 Y 偏移,640 和 480 对应于宽度和高度。 它定义了一个表示图像边界的矩形。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640" viewBox="0 0 640 480">
从 SVG 标记行中取出高度和宽度。
当指定 viewBox、width 和 height 属性时,IE9、IE10 和 IE11 无法正确缩放添加了 img 标签的 SVG 文件。
可以通过仅删除width
和height
属性并仅通过 CSS 操作它们来解决此问题。
img[src*=".svg"] {
width: 100%;
}
注意:如果您在 IE11 中放置 SVG 内联,则需要在 SVG 标签中设置 width 和 height 属性,并使用 CSS 将 SVG 标签的宽度设置为 100%,以便正确缩放。
这是我必须编写的节点脚本来解决相同的问题(对于包含多个 SVG 的文件夹),也许它对某人有帮助:
'use strict'
const fs = require('fs')
fs.readdir(`./`, (err, flist) => {
if (typeof flist != 'undefined') {
flist.forEach((file, i) => {
proceed(file)
})
}
})
function proceed(file){
fs.readFile(`./${file}`, 'utf8', (err,svg) => {
let out = svg.replace('<svg', '<svg viewBox="0 0 640 480" ')
if (!svg.includes('viewBox')){
fs.writeFile(file, out, err => {
if(err) {
console.log(err);
} else {
console.log("Saved: " + file);
}
})
}
})
}
从wonderflags 中查看@ this flag 以获得答案,您需要设置viewbox="0 0 640 480" 否则它将不起作用。 (欧盟旗帜)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640" viewBox="0 0 640 480"><defs><g id="d"><g id="b"><path d="M0-1l-.3 1h.5z" id="a"/><use transform="scale(-1 1)" xlink:href="#a"/></g><g id="c"><use transform="rotate(72)" xlink:href="#b"/><use transform="rotate(144)" xlink:href="#b"/></g><use transform="scale(-1 1)" xlink:href="#c"/></g></defs><path fill="#039" d="M0 0h640v480H0z"/><g transform="translate(320 242.263) scale(23.7037)" fill="#fc0"><use height="100%" width="100%" xlink:href="#d" y="-6"/><use height="100%" width="100%" xlink:href="#d" y="6"/><g id="e"><use height="100%" width="100%" xlink:href="#d" x="-6"/><use height="100%" width="100%" xlink:href="#d" transform="rotate(-144 -2.344 -2.11)"/><use height="100%" width="100%" xlink:href="#d" transform="rotate(144 -2.11 -2.344)"/><use height="100%" width="100%" xlink:href="#d" transform="rotate(72 -4.663 -2.076)"/><use xlink:href="#d" transform="rotate(72 -5.076 .534)"/></g><use height="100%" width="100%" xlink:href="#e" transform="scale(-1 1)"/></g></svg>
使用 boostrap img-fluid 的内联 SVG 遇到了很多麻烦。 SVG 总是以错误的高度呈现。 我使用下面的代码来修复它。 在 IE10 和 IE11 中测试。
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
svg.img-fluid {
position: absolute;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.