首页 文章

使用CSS更改SVG Viewbox大小

提问于
浏览 次
12

问题：有没有办法用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绝对是一个可接受的解决方案 . ）

css svg

5 回答

  • 3

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

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

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

    回复于
  • 3

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

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

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

    至

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

    或者使用CSS：

    width: 100%;
height: 100%;
    回复于
  • -3

    你试过了吗：

    preserveAspectRatio='xMinYMin'

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

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

    回复于
  • 2

    为了获得灵活的SVG，允许您更改其宽度和高度，您需要 remove completely the width and height 并使用 viewbox 代替 .

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

    在你的css中，参考你的svg并定义它的 max-width 和 max-height ，例如：

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

}

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

    回复于
  • 2

    我发现了一个简单的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);
}
    回复于

相关问题