Question

我有一个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" />

Answer 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%" />

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

1 个答案: