Chrome，SVG和最大高度

Question

我在使用chrome和svgs时遇到问题。

我希望2个svg是屏幕宽度的100％，最大为400px。 因此，在移动屏幕上，它们垂直对齐，然后在桌面上，它们水平对齐。

我检查过的所有浏览器（Chrome浏览器除外）都在发生这种情况。 我将在下面解释更多。

相关SVG

   viewport 0 0 400 150

相关CSS

.svg{
margin-right:auto;
margin-left:auto;
width: 100%;
max-width: 400px;
background-color: aliceblue;
max-height: 150px;
}

相关的JavaScript

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script  type="text/javascript">
var imageWidth = 1*$(window).width();
var imageHeight = .425*$(window).width();
$("document").ready(function(){
        $(".svg").css("width", imageWidth);
        $(".svg").css("height",imageHeight);
});   
</script>

相关的HTML

    <object class="svg" type="image/svg+xml"  data="/svg/betterLearning1.svg" >
    </object>    
    <object class="svg" type="image/svg+xml"  data="/svg/betterLearning2.svg" >
    </object>

当我查看Chrome中的inspect元素时，我可以看到css max-width已覆盖javascript生成的宽度，但没有破坏高度，并且按照脚本保持不变。

编辑一个潜在的解决方法是在JavaScript变量生成CSS之前限制它们。

if (imageWidth > 400){
    imageWidth = 400;
 }
if (imageHeight > 150){
imageHeight = 150;
}