用CSS改变SVG视框大小

Question

问题:是否有一种方法可以用CSS改变SVG视图框的大小，但保持长宽比?或者有没有其他方法可以在没有视图框的情况下保持SVG的长宽比。

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

小提琴:http://jsfiddle.net/hT9Jb/1/

<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

您可以使用转换:

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

Answer 2

我还没有找到一种方法来改变viewBox属性与CSS。然而，这个Javascript解决方案工作得很好:

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

还要从SVG中删除对宽度和高度的引用，并在CSS中设置它们。尽管您使用的是SVG，但它是内联的，因此适用级联规则。

Answer 3

为了拥有一个灵活的SVG，允许您更改其宽度和高度，您需要完全删除宽度和高度并使用viewbox。

并且，与sansSpoon所说的相反，您不需要javascript来完成此操作。

在css中，参考svg并定义其max-width和max-height，例如:

.my_svg_element {
    max-width: 250px;
    max-height: 400px;
}

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

Answer 4

你试过了吗:

preserveAspectRatio='xMinYMin'

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

有关详细信息，请参阅mozilla关于svg的文档

Answer 5

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

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

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

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

或与CSS:

width: 100%;
height: 100%; 

Answer 6

以@Paulo Coghi的答案为基础，这对我来说是最好的答案(他在几个小时的失败测试和无用的谷歌搜索后拯救了我):

转换你的svg from:

<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 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

我找到一个简单的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);
}