Question

问题：有没有办法用CSS更改SVG视图框的大小，但保留纵横比？ OR是否有另一种方法可以在没有视图框的情况下保留SVG的宽高比。

问题：我想响应地调整SVG的大小，但保持纵横比。视图框的宽度随页面调整，但高度不随宽度调整。问题在于容器div的高度取决于视图框的高度。因此，即使在视图框的下半部分没有显示任何内容，容器div也可能非常高。

<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

我还没有找到一种方法来改变使用CSS的viewBox属性。但是这个Javascript解决方案效果很好：

var mySVG = document.getElementById('svg');
mySVG.setAttribute("viewBox", "0 0 100 100");

同时从SVG中删除对宽度和高度的任何引用，并在CSS中设置它们。即使您使用SVG，它也是内联的，因此适用级联规则。

Answer 2

SVG中指定的宽度和高度值是导致问题的原因。

解决方案是修复SVG文件。变化：

width="250px" height="400px"

到

width="100%" height="100%"

或者使用CSS：

width: 100%;
height: 100%;

Answer 3

你有没有尝试过：

preserveAspectRatio='xMinYMin'

请查看此示例http://jsfiddle.net/hT9Jb/3/

有关详细信息，请参阅mozila documentation about svg

Answer 4

为了拥有灵活的SVG，您可以更改其宽度和高度，您需要完全删除宽度和高度，而是使用var x = new Date('JUN-2016'); var y = new Date('MAY-2016'); console.log(+x < +y);。

而且，与sansSpoon所说的相反，你不需要javascript就可以做到这一点。

在您的CSS中，请参阅您的svg并定义其viewbox和max-width，例如：

max-height

之后，您的SVG将具有弹性，同时将尊重您之前定义的最大宽度和高度。

Answer 5

您可以使用转换：

transform: scale(0.75); // 75% of original size

Answer 6

帮助我的是，在height标签上设置了width和img：

<img src="./logo.svg" height="150px" width="150px"/>

Answer 7

    svg{
        width: 50%;
        background-color: #000;
    }

 <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" preserveAspectRatio="none">
        <rect x="0" y="0" fill="#FF0000" width="250" height="400"/>
    </svg>

只需使用它，看看它是否有效（对我有用）。

<svg .... .... ...  preserveAspectRatio="none">

这应该有效。

Answer 8

建立在@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>

然后你可以在你的 CSS 中使用：

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

Answer 9

我找到了一个简单的JavaScript解决方案：

function setSvgSize(){
    var width = document.getElementById('svg-container').offsetWidth;
    var x = parseInt( $('#svg').attr('width') );
    var y = parseInt( $('#svg').attr('height') );
    var height = (width / x) * y;
    $('#svg-container').css('height',height);
}

使用CSS更改SVG Viewbox大小

9 个答案: