宽度/高度的SVG在IE9 / 10/11上无法缩放-Java 学习之路

IE 9/10/11有一个已知问题，如果你有一个SVG文件，其中 <svg> 元素指定宽度和高度，然后使用 <img> 标签的 width 和 height 属性缩放SVG图像，IE不会适当缩放图像 .

我遇到过这个问题 . 我有一系列SVG标志图标 . 对于US标志图标，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>

And here's the full source for the SVG.

我将SVG插入带有 <img> 标记的HTML文档中，并将其缩小到20x15：

在Chrome 39上，SVG正确呈现如下：

enter image description here

但在IE10上，它呈现如下：

enter image description here

所以，这里似乎发生的事情是，即使IE10将 <img> 元素的大小调整为20x15，它也不会缩小SVG的大小 - 所以我们最终只能看到标志图标的左上角，它看起来像一个纯蓝色框 .

好的......所以这似乎是documented solutions的一个已知问题 . 一种解决方案是简单地删除SVG文件中的所有 width 和 height 属性 . 这看起来有点危险，因为如果你有很多SVG文件我也不会有点麻烦 - 需要更多的脚本来处理这些文件 .

一个更好的解决方案是使用CSS专门针对IE10中的SVG元素，显然可以使用供应商特定的媒体查询：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src*=".svg"] {
    width: 100%; 
  }
}

好的，但我不想要我想要的东西 . 好吧，也许我可以通过将SVG宽度设置为100％来强制IE扩展SVG，但随后约束父容器的大小 . 所以我将 <img> 包裹在DIV中，宽度和高度为20x15 . 但是......这只会导致与以前相同的问题：容器DIV固定为20x15，但SVG不会缩小 - 所以我们最终得到的是标志的左上角，如前所示：

enter image description here

...所以，我可能只是不了解这个解决方案 . 如何让IE10 / 11将标志图标缩小到20x15？

4 回答

12
当您的图像缺少 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">
```
回复于 2024-04-29T16:43:16+08:00
61
Take the height and width out of the SVG tag line.

当指定viewBox，width和height属性时，IE9，IE10和IE11无法正确缩放添加了img标记的SVG文件 .

可以通过删除 just the width and height attributes 来解决该问题，并仅通过CSS操作它们 .
```
img[src*=".svg"] {
  width: 100%; 
}
```
回复于 2024-04-29T16:43:16+08:00

这里是我必须写的节点脚本来修复相同的问题（对于有许多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);
                }
            }) 
        }
    })
}

回复于 2024-04-29T16:43:16+08:00

从wonderflags看@这个标志为你的答案，你需要设置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>

回复于 2024-04-29T16:43:16+08:00

宽度/高度的SVG在IE9 / 10/11上无法缩放

4 回答

相关问题