使用CSS更改SVG Viewbox大小

Question

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

问题:我想响应地调整SVG的大小,但保持纵横比.视图框的宽度随页面调整,但高度不随宽度调整.问题在于容器div的高度取决于视图框的高度.因此,即使在视图框的下半部分没有显示任何内容,容器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

我还没有找到一种使用CSS更改viewBox属性的方法。但是，此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-widthand max-height，例如：

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

}

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

Answer 4

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

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

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

至

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

或使用CSS：

width: 100%;
height: 100%; 

Answer 5

你试过了吗：

preserveAspectRatio='xMinYMin'

检查这个例子http://jsfiddle.net/hT9Jb/3/

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