javascript - 滚动退出时在 Chrome 中调整大小的 JS 滚动

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

我相信您已经在 Webkit 中发现了这个错误。现在基于 Webkit 的浏览器还不能 100% 支持缩放 SVG。

您最好的选择是在标签本身中设置widthandheight属性（可能还有and，我不知道这是否有必要），然后使用百分比缩放标签。<svg>viewboxpreserveAspectRatio<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%" />