在Rollover退出时,JS Rollover在Chrome中调整大小

时间:2013-04-15 13:36:13

标签: javascript html rollover

我有一个javascript翻转,可以在其他浏览器中使用,一旦我使用Chrome来翻转它,退出时它会调整到一个荒谬的小尺寸。

有什么想法吗?

<script type="text/javascript">
$('<img />',{ src: 'images/image.gif'});
$(function() {
    $("#logohover").hover(
        function() {
            $(this).attr("src", "images/image.gif");
        },
        function() {
            $(this).attr("src", "images/image.svg");
        }                         
    );                  
});

<img id="logohover" src="images/image.svg" width="50" height="50" />

1 个答案:

答案 0 :(得分:1)

我相信你找到了bug in Webkit。目前基于Webkit的浏览器并不是100%支持扩展SVG。

这里最好的选择是在width标签中设置height<svg>属性(加上viewbox and preserveAspectRatio,我不知道是不是必要的)然后使用百分比缩放<img>标记。

在SVG文件中:

<svg
    ...
    width="50"
    height="50"
    preserveAspectRatio="xMinYMin meet"
    viewBox="0 0 50 50"
    ...
>

在HTML中:

<img id="logohover" src="images/image.svg" width="100%" height="100%" />