Safari 中的 SVG 高度更大答案

【问题标题】：SVG Height Larger in SafariSafari 中的 SVG 高度更大
【发布时间】：2013-08-01 20:29:13
【问题描述】：

在site 上工作了很长时间，几乎完成了。我现在主要处理 Safari 和 Chrome（基于 webkit 的浏览器）中的 SVG 问题。当我在主页上加载 SVG 时，它比 Firefox 和 IE 中的大。这会导致图像（帽子人的头部）被稍微切断或隐藏，因为它显示为比在 Firefox 中更大的图像。 Safari 截图：

火狐截图：

我在 SO 上找到了this thread。他们建议使用：

svg { max-height: 100%; }

此 CSS 在网站上发生了变化：

.hatman {
    position: absolute;
    bottom: 15px;
    left: 50px;
    right: 30%;
}

.hatman .hatman-slide {
    height: 100%;
    max-height:100%;/*added as suggested */
    width: 100%;
}
.hatman #profile {
    position:absolute;
    left: 0px;
    }
.hatman #hat {
    opacity: 0;
}

但这对我不起作用。 OP也不接受答案。 SO here 描述了另一个类似的问题，但也没有答案。有没有人建议如何解决这个问题？

【问题讨论】：

旁注： right: 30%; in .hatman 无效
@ShivanRaptor 感谢您的提示。

标签： google-chrome svg safari webkit

【解决方案1】：

最后，这更多的是 Webkit 处理 SVG 大小调整的问题。

此 JavaScript 用于修复最大高度问题

    function TSafariFix() {

    jQuery(window).resize(function() {
    TSafariFix_Resize();
    });
    TSafariFix_Resize();
}

jQuery(document).ready(function(){
    Hatman = new THatman();
    SFix = new TSafariFix();
});

【讨论】：