JS Rollover在Chrome浏览器的滚动条大小调整大小

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。这里

你最好的选择将是设置在<svg>标签本身的width和height性（加也许是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%" />