Як зрозуміти атрибут Viewbox у SVG

Посібник веб-дизайну щодо використання вікна вікна "SVG" (HTML)

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

Viewbox дозволяє вказати аналізатору збільшити масштаб цієї третини. Це усуває зайвий простір. Подумайте про вікно перегляду як віртуальний підхід до обрізання зображення. Без цього ваша графіка буде відображати третину фактичного розміру.

Значення панелі перегляду

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

  • minx - початкова x координата
  • miny - початок y координати
  • width - ширина вікна перегляду
  • висота - висота вікна перегляду

Синтаксис значень поля перегляду:

viewBox = "0 0 200 150"

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

Це вікно перегляду охоплює всю сторінку.

Це вікно перегляду охоплює половину сторінки, починаючи з правого верхнього кута.

Ваша форма також має призначення висоти та ширини.

Це документ, який охоплює 800 x 400 пікселів із вікном перегляду, який починається у верхньому правому куті і розширює половину сторінки. Форма - це прямокутник, який починається у верхньому правому куті вікна перегляду та переміщується на 100 пікселів вліво та на 50 пікс вниз.

Навіщо встановлювати вікно перегляду?

SVG робить набагато більше, ніж просто малювати форму. SVG можна використовувати у веб-дизайні. Це може створити одну фігуру поверх іншої для ефекту тіні. Він може перетворити форму так, щоб вона нахилялася в одну сторону. Для розширених фільтрів вам потрібно буде зрозуміти та використовувати атрибут viewbox.