Change SVG Viewbox size with CSS

问题

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.

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.

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

(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.)

回答1:

You could use a transform:

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

回答2:

I haven't yet found a way to change the viewBox property with CSS. However this Javascript solution works well:

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

Also remove any references to width and height from the SVG and set them in CSS. Even though your working with an SVG, it's inline so cascading rules apply.

回答3:

The width and height values specified in your SVG are the cause of your problem.

The solution is to fix your SVG file. Change:

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

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

Or with CSS:

width: 100%;
height: 100%;

回答4:

Did you try:

preserveAspectRatio='xMinYMin'

Check this example http://jsfiddle.net/hT9Jb/3/

For more details, see mozila documentation about svg

回答5:

In order to have a flexible SVG, that allows you to change its width and height, you need to remove completely the width and height and work with viewbox instead.

And, contrary to what sansSpoon said, you do not need javascript to do this.

In your css, refer to your svg and define its max-width and max-height, for example:

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

}

After that, your SVG will be elastic and, at the same time, will respect the max width and height you have defined before.

回答6:

What helped me was setting height and width on an img tag:

<img src="./logo.svg" height="150px" width="150px"/>

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

Just use this and see if it works(worked for me).

<svg .... .... ...  preserveAspectRatio="none">

This should work.

回答8:

I found a simple javascript solution:

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);
}

来源：https://stackoverflow.com/questions/24463096/change-svg-viewbox-size-with-css

标签

css

svg