宽度/高度的SVG在IE9 / 10/11上不能缩放 [英] SVG with width/height doesn't scale on IE9/10/11

问题描述

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

我遇到了这个问题。我有一系列的SVG标志图标。对于美国国旗图标，SVG对象写为：

 < svg xmlns =http：//www.w3 .org / 2000 / svgxmlns：xlink =http://www.w3.org/1999/xlinkheight =480width =640> 
 
 <！ - 要绘制标志的元素..  - > 
 
< / svg> 
  

这里是完整的

我使用< img> 标记，然后将其缩小到20x15：

在Chrome 39上，SVG被正确渲染像这样：

但在IE10上，它呈现如下：

< img> 元素设置为20x15，它不缩减SVG的尺寸 - 所以我们最终只看到了标志图标的左上角，它显示为一个普通的蓝色框。

好的...所以这似乎是 记录的解决方案 。一种解决方案是简单地删除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不缩小 - 因此，我们最终所得到的是该标志的左上角蓝色角落：

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

code> viewBox 在 svg 元素上的属性。

您应该设置为： 0 0 640 480 。零点是X和Y偏移量，640和480对应于宽度和高度。它定义了一个代表图像边界的矩形。

 < svg xmlns =http：//www.w3。 org / 2000 / svgxmlns：xlink =http://www.w3.org/1999/xlinkheight =480width =640viewBox =0 0 640 480> 
  

There's a known issue with IE 9/10/11 where if you have an SVG file where the <svg> element specifies a width and height, and then you scale the SVG image using the width and height attributes of an <img> tag, IE doesn't properly scale the image.

I've run into this issue. I have a series of SVG flag icons. For the US flag icon, the SVG object is written as:

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

I insert the SVG into an HTML document with an <img> tag, and down-scale it to 20x15:

On Chrome 39, the SVG is rendered properly like so:

But on IE10, it renders as follows:

So, what seems to be happening here is that even though IE10 sizes the <img> element to 20x15, it doesn't downscale the SVG - so we end up seeing just the top-left corner of the flag icon, which appears as a plain blue box.

Okay... so this seems to be a known issue with documented solutions. One solution is to simply remove all the width and height attributes in the SVG file. This seems a bit dangerous as I don't want to screw up the actual designs. It's also a bit cumbersome to do if you have a lot of SVG files - requiring more scripts to process the files.

A nicer solution is to use CSS to specifically target SVG elements in IE10, which apparently is possible using a vendor specific media query:

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

Okay, but I don't understand this solution. When I try the above, IE10 simply expands the size of the SVG to fill the entire parent container, which isn't what I want. Okay, so maybe I can force IE to scale the SVG by setting the SVG width to 100%, but then constraining the size of the parent container. So I wrapped the <img> in a DIV with a width and height of 20x15. But... that just resulted in the same problem as before: the container DIV is fixed at 20x15, but the SVG doesn't shrink - so all we end up with is the top-left blue corner of the flag as before:

... so, I'm probably just not understanding something about this solution. How can I get IE10/11 to scale the flag icon down to 20x15?

解决方案

This happens when your image is missing the viewBox attribute on the svg element.

Yours should be set to: 0 0 640 480. The zeros are X and Y offsets and the 640 and 480 correspond to the width and height. It defines a rectangle that represents the boundaries of the image.

<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在IE9 / 10/11上不能缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！