Как сделать элемент <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> в приведенном выше коде имеет явно заданную ширину и высоту.

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

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

Ответ 1

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

Ответ 2

Предположим, что у меня есть 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'
});

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

Ответ 3

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

Ответ 4

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

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

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

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

Ответ 5

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

"width=device-width"