使用CSS更改SVG Viewbox的大小 [英] Change SVG Viewbox size with CSS

问题描述

问题:有没有一种方法可以使用CSS更改SVG视图框的大小，但保留长宽比?或者，还有另一种方法可以在没有视图框的情况下保留SVG的长宽比.

The Question: Is there a way to change the size of the SVG viewbox with CSS, but preserve the aspect ratio? OR is there another way to preserve the aspect ratio of the SVG without a view box.

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

The Problem: I want to responsively adjust the size of the SVG, but keep the aspect ratio. The width of the viewbox adjusts with the page, but the height doesn't adjust with the width. The problem with that is that the height of the container div is dependent on the height of the viewbox. So the container div may be really tall even if there's nothing showing in the bottom half of the viewbox.

提琴: 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绝对是可以接受的解决方案.)

(Object SVGs and img SVGs wont work for my purposes. It has to be inline. The solution doesn't have to be CSS...javascript is definitely an acceptable solution.)

推荐答案

您可以使用转换:

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

这篇关于使用CSS更改SVG Viewbox的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！