Google chrome Safari中的SVG高度更大

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

Firefox屏幕截图：

我发现是这样的。在那里，他们建议使用：

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中描述，但也没有答案。有人建议如何解决这个问题吗？

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

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

    function TSafariFix() {

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

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

---

旁注：右：30%；哈特曼没有effect@ShivanRaptor谢谢你的提示。