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

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

105 голосов
/ 19 января 2012

Цель состоит в том, чтобы элемент <svg> расширился до размера его родительского контейнера, в данном случае <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> в приведенном выше коде имеет явно заданные ширину и высоту.

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

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

Ответы [ 5 ]

49 голосов
/ 19 января 2012

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

22 голосов
/ 11 февраля 2015

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

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

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

pic2

Затем я сохраняю этот файл как новый файл 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, это 800px X 600px. Следующее, что вам нужно сделать, это установить для preserveAspectRatio значение «none». Если вам нужно больше информации об этом атрибуте, вот хорошая ссылка . И это все, что нужно сделать.

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

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

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

4 голосов
/ 19 декабря 2014

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

2 голосов
/ 06 февраля 2013

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

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

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

svg {
  width:50%;
  height:50%;
}
1 голос
/ 29 апреля 2014

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

"width=device-width"
...