Как заставить элемент <svg> расширяться или сжиматься до родительского контейнера?

Цель состоит в том, чтобы <svg>элемент расширился до размера его родительского контейнера, в данном случае a <div>, независимо от того, насколько большим или маленьким может быть этот контейнер.

Код:

<style>
    svg, #container{
        height: 100%;
        width: 100%;
    }
</style>

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
         <rect x="0" y="0" width="100" height="100" />
    </svg>
</div>

Наиболее распространенное решение этой проблемы - установка viewBoxатрибута для <svg>элемента.

viewBox="0 0 widthOfContainer heightOfContainer"

Однако это не работает в тех случаях, когда элементы внутри <svg>элемента имеют заранее заданную ширину и / или высоту. Например, для <rect>элемента в приведенном выше коде явно заданы ширина и высота.

Таким образом, очевидным решением является использование% ширины и% высоты для этих элементов. Но нужно ли это вообще делать? Тем более, что <img src=test.svg >отлично работает и без проблем расширяется / сжимается с явно заданной <rect>высотой и шириной.

Если такие элементы, как <rect>и другие подобные элементы, должны иметь свою ширину и высоту, определенные в процентах, есть ли в Inkscape способ установить это так, чтобы все элементы в <svg>документе использовали процентную ширину, высоту и т. Д. Вместо фиксированных размеров ?

Дело viewBoxне в высоте контейнера, а в размере вашего рисунка. Определите viewBoxширину 100 единиц, затем определите rect10 единиц. После этого, каким бы большим вы ни масштабировали SVG, rectширина изображения будет составлять 10%.

Предположим, у меня есть SVG, который выглядит так:

И я хочу поместить его в div и заставить его быстро заполнять div. Мой способ сделать это так:

Сначала я открываю файл SVG в таком приложении, как inkscape. В File-> Document Properties я установил ширину документа 800 пикселей и высоту 600 пикселей (вы можете выбрать другие размеры). Затем я поместил SVG в этот документ.

Затем я сохраняю этот файл как новый файл SVG и получаю данные пути из этого файла. Теперь в HTML код, который творит чудеса, выглядит следующим образом:

<div id="containerId">    
    <svg
    id="svgId" 
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    x="0"
    y="0"
    width="100%"
    height="100%"
    viewBox="0 0 800 600"
    preserveAspectRatio="none">
       <path d="m0 0v600h800v-600h-75.07031l-431 597.9707-292.445315-223.99609 269.548825-373.97461h-271.0332z" fill="#f00"/>
    </svg>
</div>

Обратите внимание, что ширина и высота SVG установлены на 100%, поскольку мы хотим, чтобы он заполнял контейнер по вертикали и горизонтали, но ширина и высота viewBox такие же, как ширина и высота документа в inkscape, что составляет 800 пикселей X 600 пикселей. Следующее, что вам нужно сделать, это установить для preserveAspectRatio значение «none». Если вам нужна дополнительная информация об этом атрибуте, вот хорошая ссылка . Вот и все.

Еще одна вещь заключается в том, что этот код работает почти во всех основных браузерах, даже в старых, но в некоторых версиях Android и iOS вам нужно использовать код javascrip / jQuery, чтобы он был согласован. Я использую следующие функции в готовых документах и ​​функциях изменения размера:

$('#svgId').css({
    'width': $('#containerId').width() + 'px',
    'height': $('#containerId').height() + 'px'
});

Надеюсь, поможет!

Что работает для меня в последнее время , чтобы удалить все height=""и width=""атрибуты из <svg>тега и всех дочерних тегов. Затем вы можете использовать масштабирование, используя процент от высоты или ширины родительского контейнера.

@robertc прав, но вы также должны заметить, что svg, #containersvg масштабируется экспоненциально для чего угодно, кроме 100% (один раз для #containerи один раз дляsvg ).

Другими словами, если я применил 50% h / w к обоим элементам, это фактически будет 50% от 50%, или 0,5 * 0,5, что равно 0,25 или 25% шкалы.

Один селектор отлично работает при использовании, как предлагает @robertc.

svg {
  width:50%;
  height:50%;
}

Для вашего iphone вы можете использовать в голове баланс:

"width=device-width"