Изменение размера окна SVG с помощью CSS

Вопрос: Есть ли способ изменить размер окна просмотра SVG с помощью CSS, но сохранить соотношение сторон? ИЛИ есть другой способ сохранить соотношение сторон 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 определенно является приемлемым решением.)

Ответы

Ответ 1

Я еще не нашел способ изменить свойство viewBox с помощью CSS. Однако это решение Javascript хорошо работает:

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

Также удалите любые ссылки на ширину и высоту из SVG и установите их в CSS. Даже несмотря на то, что вы работаете с SVG, он применяет такие каскадные правила.

Ответ 2

Значения ширины и высоты, указанные в SVG, являются причиной вашей проблемы.

Решение состоит в том, чтобы исправить ваш файл SVG. Изменить:

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

в

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

Или с помощью CSS:

width: 100%;
height: 100%;

Ответ 4

Чтобы иметь гибкий SVG, который позволяет вам изменять его ширину и высоту, вам нужно полностью удалить ширину и высоту и вместо этого работать с viewbox.

И, вопреки тому, что сказал sansSpoon, вам не нужен javascript для этого.

В вашем css обратитесь к svg и определите его max-width и max-height, например:

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

}

После этого ваш SVG будет эластичным и в то же время будет учитывать максимальную ширину и высоту, которые вы определили ранее.

Ответ 5

Вы можете использовать преобразование:

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

Ответ 6

Я нашел простое решение для 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);
}