Як змусити <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 одиниць, а потім визначте, що вона rectмає бути 10 одиниць. Після цього, як би ви масштабували SVG, rectширина зображення буде на 10%.

Припустимо, у мене є SVG, який виглядає приблизно так:

І я хочу помістити його в дів і змусити його заповнити діву чуйно. Мій спосіб зробити це такий:

Спочатку я відкриваю файл 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 збігаються із шириною та висотою документа у чорнильному кольорі, який становить 800px X 600 пікс. Наступне, що вам потрібно зробити, - це встановити файл зберігання збереженняАспектРаціо на "ні". Якщо вам потрібно отримати більше інформації про цей атрибут, ось хороше посилання . І це все є.

Ще одна річ полягає в тому, що цей код працює майже у всіх основних браузерах, навіть у старих, але для деяких версій Android та ios вам потрібно використовувати код javascrip / jQuery, щоб підтримувати його. Я використовую наступне в документах, готових і змінюючи розміри:

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

Сподіваюся, це допомагає!

Що для мене нещодавно працює - це видалити всі height=""та width=""атрибути з <svg>тегу та всіх дочірніх тегів. Потім ви можете використовувати масштабування, використовуючи відсоток висоти або ширини батьківського контейнера.

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

Іншими словами, якщо я застосував 50% h / w до обох елементів, це насправді 50% 50%, або .5 * .5, що дорівнює .25 або 25% шкалі.

Один селектор працює добре, коли використовується @robertc.

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

Для свого iphone Ви можете використовувати в голові баліз:

"width=device-width"