IE svg缩放问题

在此website上，.logo-bar容器中有四个svg徽标。他们每个人的内放一个图片代码，像这样：IE svg缩放问题

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

视框中设置每个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">

IE11在Windows 7和Windows 8.1似乎并没有按比例svg的正确。

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

P.S.我试图在jsfiddle中重现问题，但问题从未出现过。

来源

2014-06-13 Marek

你不使用SVG ...你使用的图像。如果你想使用SVG **元素**，把**代替链接而不是图像。 –

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

我们使用了很多SVG，并且因为这样的问题而禁止使用'width'和'height'。坚持SVG中的'viewBox'并让包含DOM元素决定大小。 – ivarni

使用svg in < img>从web标准的角度来看是完全正常的，并且应该可以正常工作（如果没有，你应该提交一个IE bugreport）。您是否尝试过在css中设置img>元素的大小，并从svg根元素中删除宽度和高度属性？

适用于logo-class及其子女的stylerules也可能会影响结果。

来源

2014-06-18 11:51:06

您需要使用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 
}

来源

2016-01-25 11:31:36

IE svg缩放问题

回答

相关问题