使用CSS更改SVG Viewbox大小

Question

<style>
    div{
        width: 100%;
        height: 500px;
        background-color: #00ffff;
    }

    svg{
        width: 50%;
        background-color: #ffff00;
    }
</style>

<div>
    <svg version="1.1" id="Layer_1" x="0px" y="0px" width="250px" height="400px" viewBox="0 0 250 400" enable-background="new 0 0 250 400" aspect-ratio="XminYmin">
        <rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
    </svg>
</div>

（对象SVG和img SVG不能为我的目的工作。它必须是内联的。解决方案不必是CSS...JavaScript绝对是一个可以接受的解决方案。）

Answer 1

基于@Paulo Coghi的答案，这对我来说是最好的答案（在几个小时的测试失败和没用的谷歌搜索之后，是谁拯救了我）：

只需将svg转换为：

<svg version="1.1" id="Layer_1" x="0px" y="0px" width="250px" height="400px" viewBox="0 0 250 400" enable-background="new 0 0 250 400" aspect-ratio="XminYmin">
        <rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
</svg>

进入：

<svg version="1.1" id="Layer_1" viewBox="0 0 250 400" >
    <rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
    // and/or whatever you want
</svg>

svg {
    max-width: 100%;
    max-height: 100%;
    // or any other units or measurements you want
}