2

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

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

这发生在我检查过的所有浏览器中，除了 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 中的检查元素时，我可以看到 css max-width 已经覆盖了 javascript 生成的宽度，但它没有改变高度，并且按照脚本保持不变。

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

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

0 回答 0