使用CSS更改SVG Viewbox的大小


Change SVG Viewbox size with CSS

问题：
有没有一种方法可以使用CSS更改SVG视图框的大小，但保留长宽比？ 或者，没有视图框，还有另一种方法可以保留SVG的长宽比。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    div{
        width: 100%;
        height: 500px;
        background-color: #00ffff;
    }

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


    <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和img SVG不能满足我的目的。它必须是内联的。解决方案不必是CSS ... javascript绝对是可以接受的解决方案。)

相关讨论

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

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

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

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

解决方案是修复您的SVG文件。更改：

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

至

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

或使用CSS：

1
2
width: 100%;
height: 100%;

您可以使用转换：

1
transform: scale(0.75); // 75% of original size
相关讨论

你试过了吗：

1
preserveAspectRatio='xMinYMin'

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

有关更多详细信息，请参见有关svg的mozila文档

相关讨论

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

而且，与sansSpoon所说的相反，您不需要使用JavaScript即可执行此操作。

在CSS中，参考SVG并定义其max-width和max-height，例如：

1
2
3
4
5
.my_svg_element {
    max-width: 250px;
    max-height: 400px;

}

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

相关讨论

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

1
2
3
4
5
6
7
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);
}