Chrome，SVG和最大高度

Question

我遇到了chrome和svgs的问题。

我希望2 svgs是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生成的宽度，但它没有对高度进行过高处理，并且按照脚本保留。

EDIT 一个潜在的解决方法是在生成css之前限制javascript变量。

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