Изменение размера рулона JS в Chrome на выходе Rollover

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