翻转SVG图像在Safari和IE中调整大小

我对一些图标使用了简单的jquery图像交换，并使用svg作为图像。翻转SVG图像在Safari和IE中调整大小

$(function(){ 
    $('img.rollover').hover(function(){ 
     var e = $(this); 
     e.data('originalSrc', e.attr('src')); 
     e.attr('src', e.attr('data-rollover')); 
    }, function(){ 
     var e = $(this); 
     e.attr('src', e.data('originalSrc')); 
    }); /* a preloader could easily go here too */ 
});

这一切工作的镀铬罚款，但在Safari，你已经推出后关闭图标，浏览器重新调整他们真的很小。在IE浏览器中，他们从单词go中只是很小。

我很想告诉我为什么会出现这种情况，如果这是使用SVG图像的最佳方法。

<a class="icon-link" href="#" data-title="Lucid"><div id="icon-sidebar"><img class="rollover" src="images/lucid_icon.svg" data-rollover="images/lucid_icon_white.svg" /></div></a> 

#icon-sidebar {width:50%; height:auto; margin-left:auto; margin-right:auto; margin-bottom:20px;} 
    img.rollover {width:100%;}

这是我正在测试的网站的链接。 Much More Creative

感谢感谢...

来源

2013-12-23 ianh_32

尝试将'font-size：'设置为您的svg图像 – Morpheus

-1

您需要从#icon-sidebar DIV删除height。

#icon-sidebar { 
    background-size: cover; 
    margin-bottom: 20px; 
    margin-left: auto; 
    margin-right: auto; 
    width: 50%; 
}

来源

2013-12-23 11:59:14 Morpheus

-1

你应该100％的宽度设为您的＃图标，侧边栏左否则＃图标栏由图标＃，侧边栏，左继承50％的宽度。此外，您的ID＃图标侧边栏不是唯一的，您应该将其更改为课堂上的情况。

来源

2013-12-23 12:01:42 Godinall

翻转SVG图像在Safari和IE中调整大小

回答

相关问题