Цель состоит в том, чтобы элемент <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> в приведенном выше коде имеет явно заданную ширину и высоту.
Таким образом, очевидным решением является использование% width и% высот для этих элементов. Но это даже нужно сделать? Тем более, что <img src=test.svg > работает нормально и без каких-либо проблем расширяет/заключает контракты с явно установленными высотами и ширинами <rect>.
Если такие элементы, как <rect> и другие подобные ему элементы, должны иметь свои ширины и высоты, определенные в процентах, есть способ в Inkscape установить его так, чтобы все элементы с документом <svg> использовали процентную ширину, высоты и т.д. вместо фиксированных размеров?
viewBox не высота контейнера, а размер вашего чертежа. Определите, что ваш viewBox должен быть 100 единиц по ширине, а затем укажите rect как 10 единиц. После этого, насколько бы вы не масштабировали SVG, rect будет на 10% шириной изображения.
Предположим, что у меня есть SVG, который выглядит так:
И я хочу поместить его в div и сделать его заполняющим div. Мой способ сделать это следующим образом:
Сначала я открываю SVG файл в приложении, таком как inkscape. В "Файл- > Свойства документа" установите ширину документа на 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, #container вызывает масштабирование svg экспоненциально для чего угодно, кроме 100% (один раз для #container и один раз для svg).
Один селектор отлично работает, когда используется, как предлагает @robertc.
svg {
width:50%;
height:50%;
}
Для вашего iphone Вы можете использовать в своем головном баласте:
"width=device-width"