滚动SVG图像resizing在Safari和IE [英] Rollover SVG images resizing in Safari and IE

问题描述

我对一些图标使用了一个简单的jquery图像交换，并使用svg作为图像。

I have used a simple jquery image swap for some icons and have used svg as the images.

$(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 */
});

这一切都可以在chrome中正常工作，但在safari中你滚开图标后，浏览器调整大小他们真的很小。在IE中，他们只是从字的小。

it all works fine in chrome, but in safari after you have rolled off the icons, the browser resizes them really small. In IE they are just small from the word go.

我希望有人告诉我为什么会发生这种情况，如果这是使用SVG图片的最好方法。

I would love someone to tell me why this might be happening, and if this is the best way to go about using SVG images.

<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%;}

这里是我工作的测试网站的链接。
更多创意

Here is the link to the test site i am working. Much More Creative

感谢赞赏...

推荐答案

＃icons-sidebar-left否则＃icon-sidebar从＃icons-sidebar-left继承50％的宽度。此外，您的ID＃icon-sidebar不是唯一的，您应该将其更改为类。

You should set a 100% width to your #icons-sidebar-left otherwise #icon-sidebar is inheriting 50% width from #icons-sidebar-left. Also your id #icon-sidebar is not unique, you should change it to class in your case.

这篇关于滚动SVG图像resizing在Safari和IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！