Як я можу зробити масштаб SVG з його батьківським контейнером?

Я хочу мати вбудовану шкалу вмісту елемента SVG, коли розмір не є власним. Звичайно, я міг би мати його як окремий файл і масштабувати його так.

index.html: <img src="foo.svg" style="width: 100%;" />

foo.svg: <svg width="123" height="456"></svg>

Однак я хочу додати додаткові стилі до SVG через CSS, тому зв'язування зовнішнього не є варіантом. Як зробити вбудовану шкалу SVG?

Щоб визначити координати у форматі SVG незалежно від масштабованого розміру зображення, використовуйте viewBoxатрибут на елементі SVG, щоб визначити, що обмежувальне поле зображення в системі координат зображення, а за допомогою widthі heightатрибутів визначте, що ширина або висота відносно сторінки, що міститься.

Наприклад, якщо у вас є наступне:

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Він буде відображатися у вигляді трикутника 10 пікселів на 20 пікселів:

Якщо ви встановите лише ширину та висоту, це змінить розмір елемента SVG, але не масштабує трикутник:

<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Якщо встановити вікно перегляду, це змусить його перетворити зображення таким чином, що задане поле (в системі координат зображення) масштабується так, щоб відповідати заданій ширині та висоті (в системі координат сторінки). Наприклад, для збільшення трикутника до 100px на 50px:

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Якщо ви хочете масштабувати його до ширини вікна перегляду HTML:

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Зауважте, що за замовчуванням співвідношення сторін зберігається. Отже, якщо ви вказали, що елемент повинен мати ширину 100%, але висоту 50 пікс, він насправді буде масштабуватися лише до висоти 50 пікселів (якщо у вас дуже вузьке вікно):

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Якщо ви дійсно хочете, щоб він розтягувався горизонтально, відключіть збереження співвідношення сторін за допомогою preserveAspectRatio=none:

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

(зауважте, що в своїх прикладах я використовую синтаксис, який працює для вбудовування HTML, щоб включити приклади як зображення в StackOverflow, я замість цього вставляю в інший SVG, тому мені потрібно використовувати дійсний синтаксис XML)

Після 48 годин досліджень я зробив це, щоб отримати пропорційне масштабування:

ПРИМІТКА. Цей зразок написаний за допомогою React. Якщо ви не використовуєте , що змінити ГорбатийРегістр річ назад в дефіс (тобто зміни backgroundColorв background-colorі змінити стиль Objectназад до String).

<div
  style={{
    backgroundColor: 'lightpink',
    resize: 'horizontal',
    overflow: 'hidden',
    width: '1000px',
    height: 'auto',
  }}
>
  <svg
    width="100%"
    viewBox="113 128 972 600"
    preserveAspectRatio="xMidYMid meet"
  >
    <g> ... </g>
  </svg>
</div>

Ось що відбувається у наведеному вище прикладі коду:

ПІДГОТОВКА

MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

min-x, min-y, ширина і висота

тобто: viewbox = "0 0 1000 1000"

Viewbox є важливим атрибутом, оскільки він в основному повідомляє SVG, який розмір малювати та де. Якщо ви використовували CSS для створення SVG 1000x1000 px, але у вашому вікні перегляду 2000x2000, ви побачите верхню ліву чверть свого SVG.

Перші два числа, min-x та min-y, визначають, чи слід SVG змістити всередині вікна перегляду.

Мій SVG повинен зміщуватися вгору / вниз або вліво / вправо

Вивчіть це: viewbox = "50 50 450 450"

Перші два номери змінять ваш SVG вліво на 50 пікселів і вгору на 50 пікселів, а другі два числа - розмір вікна перегляду: 450x450 пікселів. Якщо ваш SVG розміром 500x500, але на ньому є додаткові накладки, ви можете маніпулювати цими номерами, щоб перемістити його всередині "viewbox".

Ваша мета на даний момент - змінити одне з цих чисел і подивитися, що відбувається.

Ви також можете повністю опустити вікно перегляду, але тоді ваш пробіг буде змінюватися залежно від будь-яких інших налаштувань, які ви маєте на той час. На мій досвід, у вас виникнуть проблеми із збереженням співвідношення сторін, оскільки вікно перегляду допомагає визначити співвідношення сторін.

ЗБЕРІГАЙТЕ АСПЕКТНИЙ РАЙОН

MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

На основі мого дослідження існує багато різних налаштувань співвідношення сторін, але за замовчуванням називається xMidYMid meet. Я поклав це на своє, щоб явно нагадати про себе. xMidYMid meetробить його масштабом пропорційно на основі середини X і Y. Це означає, що він залишається центрованим у вікні перегляду.

ШІРНА

MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width

Подивіться мій приклад коду вище. Зверніть увагу, як я встановлюю лише ширину, а не висоту. Я встановив його на 100%, щоб він заповнив контейнер, в якому знаходиться. Це, мабуть, найбільше сприяє відповіді на це запитання щодо переповнення стека.

Ви можете змінити його на будь-яке значення пікселя, яке ви хочете, але я рекомендую використовувати 100%, як я зробив, щоб підірвати його до максимального розміру, а потім контролювати його за допомогою CSS через батьківський контейнер. Я рекомендую це, оскільки ви отримаєте "належний" контроль. Ви можете використовувати медіа-запити, а також можете контролювати розмір без шаленого JavaScript.

СКАЛІЗАЦІЯ З допомогою CSS

Подивіться ще раз на мій приклад коду. Зверніть увагу, як я маю ці властивості:

resize: 'horizontal', // you can safely omit this
overflow: 'hidden',   // if you use resize, use this to fix weird scrollbar appearance
width: '1000px',
height: 'auto',

Це додатково, але він показує, як дозволити користувачеві змінювати розмір SVG, зберігаючи належне співвідношення сторін. Оскільки SVG підтримує власне співвідношення сторін, вам потрібно зробити лише зміну ширини на батьківському контейнері, і він змінить розмір за бажанням.

Ми залишаємо висоту в спокої і / або встановлюємо її на автоматичну, а розмір регулюємо шириною. Я вибрав ширину, тому що це часто більш змістовно завдяки чуйним конструкціям.

Ось зображення цих налаштувань:

Якщо ви читаєте кожне рішення у цьому питанні, і все ще сумбуєтесь або не зовсім бачите те, що вам потрібно, перегляньте це посилання тут. Я вважаю це дуже корисним:

https://css-tricks.com/scale-svg/

Це велика стаття, але вона розбиває майже всі можливі способи маніпулювання SVG, з CSS або без нього. Рекомендую прочитати його, недбало пивши каву або вибираючи вибрані рідини.

Ви хочете зробити перетворення як таке:

з JavaScript:

document.getElementById(yourtarget).setAttribute("transform", "scale(2.0)");

За допомогою CSS:

#yourtarget {
  transform:scale(2.0);
  -webkit-transform:scale(2.0);
}

Загорніть свою сторінку SVG у тег групи як такий і націліть на неї, щоб маніпулювати цілою сторінкою:

<svg>
  <g id="yourtarget">
    your svg page
  </g>
</svg>

Примітка : Шкала 1,0 становить 100%

Збільшившись і знайшовшись, цей CSS, здається, містить SVG у браузері Chrome аж до того, що контейнер більший за зображення:

div.inserted-svg-logo svg { max-width:100%; }

Також, здається, працює у FF + IE 11.

зміна файлу SVG не було для мене справедливим рішенням, тому я використав відносні одиниці CSS .

vh, vw, %Дуже зручно. Я використовував CSS, як height: 2.4vh;щоб встановити динамічний розмір для своїх SVG-зображень.

Ще один простий спосіб

transform: scale(1.5);

Налаштування атрибута currentScale працює в IE (я тестував IE 11), але не в Chrome.