IE svg 缩放问题答案

【问题标题】：IE svg scaling issueIE svg 缩放问题
【发布时间】：2014-08-03 15:39:49
【问题描述】：

在这个website 上，.logo-bar 容器中有四个 svg 徽标。它们中的每一个都放在一个图像标签内，如下所示：

<div class="logo-bar">
    <p class="logo">
        <a href=""><img src="resources/img/miterassa_logo.svg" alt=""></a>
    </p>

viewBox 设置在每个 svg 文件中：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="339.827px" height="84.337px" viewBox="0 0 339.827 84.337" enable-background="new 0 0 339.827 84.337" xml:space="preserve">

Windows 7 和 Windows 8.1 上的 IE11 似乎无法正确缩放 svg。

有时，在初始加载或刷新页面后，只有一些徽标的缩放不正确。

附：我试图在 jsfiddle 中重现该问题，但问题从未出现。

【问题讨论】：

您没有使用 SVG...您使用的是图像。如果您想使用 SVG 元素，请将 that 放入链接而不是图像。
在中使用 svg 从 Web 标准的角度来看是非常好的，并且应该可以正常工作（如果没有，您应该提交 IE 错误报告）。您是否尝试过在 css 中设置元素的大小并从 svg 根元素中删除 width 和 height 属性？
我们使用了很多 SVG，我已经禁止使用 width 和 height 因为这样的问题。坚持使用 SVG 中的 viewBox 并让包含的 DOM 元素决定大小。
所以你是说 svg 中的 width 和 height 是问题所在？
@ErikDahlström 如果您将您的评论写成答案，我会接受它，因为您的评论包含此问题的解决方案。

标签： css internet-explorer svg responsive-design viewbox

【解决方案1】：

从网络标准的角度来看，在中使用 svg 非常好，并且应该可以正常工作（如果没有，您应该提交 IE 错误报告）。您是否尝试过在 css 中设置元素的大小并从 svg 根元素中删除 width 和 height 属性？

应用于logo-class 及其子项的样式规则也可能会影响结果。

【讨论】：

【解决方案2】：

您需要使用 CSS 设置 SVG 的高度和宽度。我建议使用以下方法将浏览器和版本添加到正文标签类：

// Loop through each of the available browsers
jQuery.each(jQuery.browser, function(i, val) {  
if(val != true){
// Render the browser type
        $(document.body).addClass("v"+parseInt(val));
    }
// Render the browser version
    else{
        $(document.body).addClass(i);
    }   
});

然后添加这个CSS：

.msie.v9 svg, .msie.v10 svg {
  width: 100%; 
  height:600px; // Add your own height here
}

【讨论】：