宽度/高度的SVG在IE9/10/11上不能缩放

IE 9/10/11存在一个已知问题，如果您有一个SVG文件，其中<svg>元素指定宽度和高度，然后缩放使用<img>标记的width和height属性的SVG图像，IE无法正确缩放图像。宽度/高度的SVG在IE9/10/11上不能缩放

我遇到了这个问题。我有一系列的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文档，向下缩放它20×15：对于美国国旗图标，如SVG对象写入

在Chrome 39中，SVG是正确地呈现，像这样：

enter image description here

但在IE10，它呈现如下：

enter image description here

那么，什么似乎是这里发生的是，即使IE10尺寸的<img>元素20×15，它不会缩减的SVG - 所以我们最终只能看到标志图标的左上角，它显示为一个普通的蓝色框。

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

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

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

好，但我不明白这一点的解决方案。当我尝试以上时，IE10只是扩大了SVG的大小来填充整个父容器，这不是我想要的。好吧，也许我可以强制IE通过将SVG宽度设置为100％来缩放SVG，但是然后限制父容器的大小。因此，我将<img>包装在宽度和高度均为20x15的DIV中。但是...导致了与之前相同的问题：容器DIV固定为20x15，但SVG不缩小 - 因此，我们最终得到的是该标志的左上角蓝色角落：

enter image description here

...所以，我可能只是没有理解这个解决方案的东西。我怎样才能让IE10/11将标志图标缩小到20x15？

来源

2015-01-15 Siler

发生这种情况时，你的形象缺少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">

来源

2015-01-15 19:51:21

谢谢 - 它解决了我的问题:) – MWD 2015-10-30 16:21:05

关于它有一篇很好的文章[https://css-tricks.com/scale-svg/]，它涵盖了这里提到的两种技术，但是来自Josiah的技术应该工作 – Simon 2015-11-25 17:04:27

从SVG标记行中取出高度和宽度。

当指定viewBox，width和height属性时，IE9，IE10和IE11不能正确缩放添加了img标签的SVG文件。

该问题可以通过删除只需width和height属性并仅通过CSS操纵它们来解决。

img[src*=".svg"] { 
    width: 100%; 
}

来源

2015-01-15 19:02:32 rfornal

这解决了我的问题。只是想添加“viewBox” - attr不应该被删除 – Senya 2017-05-10 12:19:59

如果我想为我的图像使用少于100％，该怎么办？换句话说，我想“缩放”它。 – Mark 2017-11-14 22:47:04

这里是节点的脚本我不得不写来解决同一个问题（对于一些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); 
       } 
      }) 
     } 
    }) 
}

来源

2016-02-04 12:55:04 Darwin

看看@这从wonderflags标志为您的答案，您需要设置viewbox =“0 0 640 480”或它不会工作。（EU Flag）

<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>

来源

2017-05-16 19:47:31

宽度/高度的SVG在IE9/10/11上不能缩放

回答

相关问题