Svg preserveaspectratio не работает

Сохранение пропорций

В предыдущем примере, пропорции или соотношение ширины и высоты графического окна и viewBox были идентичными (4/5=64/80). Что же происходит, если пропорции области просмотра и viewBox будут разными? Например, где пропорциональность viewBox равна 1/1, а у области просмотра — 1/3?

SVG в такой ситуации может пойти тремя путями:

• равномерно изменить размеры изображения согласно наименьшей грани области просмотра, чтобы изображение полностью вместилось. В нашем примере, изображение потеряет половину своей ширины и высоты (см. примеры ниже).
• равномерно изменить размеры изображения согласно наибольшей грани области просмотра и обрезать части, которые будут находиться за пределами области просмотра. В нашем примере, изображение станет в полтора раза больше своей ширины и высоты (см. примеры ниже).
• растянуть/сжать изображение, чтобы оно точно вписывалось в область просмотра (см. примеры ниже).

В первом случае, так как изображение будет меньше области просмотра по одной из осей, поэтому нужно будет задать, где его разместить. В примере, картинка будет равномерно масштабироваться (уменьшаться) пока значение и ширины, и высоты не будут превышать 45 пикселей. Ширина уменьшенной картинки идеально совпадает с шириной области просмотра. Но сейчас нужно решить как картинка будет выровнена по вертикали относительно окна просмотра: по нижнему краю, по центру или по верхнему.

Во втором случае, так как изображение будет больше, чем область просмотра по одной из осей, Вам будет необходимо определить, какая часть будет обрезана. В примере, картинка будет равномерно масштабироваться пока значения и ширины, и высоты картинки не будут меньше 135 пикселей. В итоге высота картинки идеально совпадает с высотой области просмотра. Но Вам необходимо решить какую невмещающуюся часть картинки обрезать, чтобы она поместилась область просмотра шириной 45 пикселей: правый край, левый или оба.

Задаем выравнивание с preserveAspectRatio

Атрибут preserveAspectRatio позволяет определить выравнивание отмасштабированного изображения относительно области просмотра. Так же может сделать так чтобы изображение полностью соответствовало области просмотра или были обрезаны части изображения.

где alignment определяет ось и выравнивание. Принимает одно из значений: xMinYMin, xMinYMid, xMinYMax, xMidYMin, xMidYMid, xMidYMax, xMaxYMin, xMaxYMid или xMaxYMax. Эти значения приводят к одному из способов выравнивания, которые расписаны в таблице ниже.

Заметка

y-выравнивание начинается с заглавной буквы для удобство восприятия, т.к. x- и y- выравнивания пишутся одним словом.

Выравнивание по оси X

значение	действие
xMin	выровнять в соответствии с минимальным значением x viewBox — левая граница области просмотра.
xMid	выровнять в соответствии с центральной точкой по x viewBox — центр по оси X в области просмотра.
xMax	выровнять в соответствии с максимальным значением x viewBox — правая граница области просмотра.

Выравнивание по оси Y

значение	действие
YMin	выровнять в соответствии с минимальным значением y viewBox — верхняя граница области просмотра.
YMid	выровнять в соответствии с центральной точкой по y viewBox — центр по оси Y в области просмотра.
YMax	выровнять в соответствии с максимальным значением y viewBox — нижняя граница области просмотра.

Итак, если Вы хотите, чтобы изображение с viewBox= «0 0 90 90» полностью вместилось в область просмотра с width=45 и height=135, располагалось в верхнем левом углу, необходимо написать:

Заметка

В данном примере изображение получит ширину равную ширине области просмотра. В таком случае визуально получили бы такой же результат даже если задали значения xMidYmin или xMaxYMin. Но для большей корректности следует указывать одинаковые значения (min-min, mid-mid, max-max).

Но все это достаточно абстрактно и туманно. Нужны конкретные примеры, которые разъяснили бы всю эту мутную теорию. Вот несколько таких, которые показывают Вам, как срабатывает выравнивание в комбинации со спецификаторами meet и slice.

Использование спецификатора meet

Спецификатор meet указывает, что изображение должно сохранить свои пропорции и быть полностью видимым. Следующие примеры демонстрируют действие meet вместе с различными вариантами выравнивания:

Использование спецификатора slice

Спецификатор slice означает, что изображение должно сохранить свои пропорции и будет отмасштабировано в соответствии с максимальным граничным значением области просмотра. Части изображения, которые не помещаются в область просмотра, будут обрезаны.

Использование спецификатора none

Спецификатор none означает, что изображение должно полностью отобразится в области просмотра даже если придется исказить пропорции изображения.

Источник

Размеры в SVG

Управление размерами — тема важная, и чтобы максимально использовать возможности SVG, нужно хорошо понимать как всё работает.

Вьюпорт

Содержимое SVG-элемента отрисовывается на бесконечном холсте и может быть сколь угодно большого размера, но видимая часть холста соответствует размерам SVG-элемента. Эта область отрисовки называется viewport (вьюпорт).

SVG позволяет управлять как размерами вьюпорта, так и поведением содержимого относительно него: оно может обрезаться или показываться полностью, может растягиваться с потерей пропорций или стараться уместиться целиком, даже если при этом появляются пустые поля. Этим поведением можно управлять с помощью атрибутов.

Если просто вставить SVG на страницу и не задавать ему никакие размеры, он отобразится размером 300px на 150px, что не поместилось — обрежется:

Ширина и высота

Шириной и высотой элемента можно управлять стандартными свойствами width и height :

Их можно задавать как атрибутами, так и в CSS:

Для размеров в пикселях, задаваемых в атрибутах, единицы измерения можно не указывать.

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

viewBox

Похожим образом не изменяя размеры содержимого ресайзится iframe , но в случае с SVG это поведение можно изменить, если определить размеры области с помощью свойства viewBox :

Первые два значения — координаты X и Y верхнего левого угла отображаемой области, последние два — ширина и высота. viewBox задаётся только атрибутом.

Попробуйте теперь изменить размеры, и вы увидите, что содержимое отресайзится, чтобы поместиться целиком.

viewBox можно использовать, например, для кадрирования изображения, чтобы показывать не всю картинку, а только какую-то её часть:

Интересно, что если у SVG нет размеров, но задан viewBox , изображение займёт собой всё доступное пространство:

Это поведение может стать проблемой: если размеры у иконок задаются в стилях, а они не загрузились — страница может превратиться в парад гигантских SVG-иконок. Чтобы этого не произошло, всегда явно задавайте в атрибутах SVG ширину и высоту, их потом легко переопределить в CSS.

preserveAspectRatio

Как мы видели в примере выше, если у SVG заданы размеры и viewBox , содержимое будет сжиматься и растягиваться с сохранением пропорций, чтобы поместиться целиком, но этим поведением тоже можно управлять — с помощью свойства preserveAspectRatio (оно задаётся только атрибутом).

Например, с помощью значения none можно указать, что сохранять пропорции не нужно:

SVG с viewBox и preserveAspectRatio=’none’ ведёт себя очень похоже на img : при изменении размеров содержимое масштабируется под размеры вьюпорта не сохраняя пропорции.

none будет полезно для резиновых фонов:

Остальные значения preserveAspectRatio состоят из двух частей: первая задаёт выравнивание, вторая — поведение элемента относительно вьюпорта.

Выравнивание задаётся одним значением, определяющим положение по вертикали и по горизонтали, например: xMaxYMin . Для обеих осей можно задать положение в начале, в середине и в конце:

xMin , YMin — в начале оси xMid , YMid — в середине xMax , YMax — в конце

Эти значения можно комбинировать в любых сочетаниях, но порядок должен сохраняться: первым всегда идет значение для X, вторым для Y. Значение для Y всегда пишется с большой буквы.

Поведение элемента определяется второй частью preserveAspectRatio . Возможные значения:

meet — содержимое стремится уместиться целиком (как фон с background-size: contain ) slice — содержимое заполняет собой всю область видимости (как background-size: cover : что не поместилось, обрежется)

Важно помнить, что preserveAspectRatio не работает без viewBox . viewBox задает область, которая должна масштабироваться, preserveAspectRatio определяет как именно она должна это делать.

Также нужно понимать, что preserveAspectRatio срабатывает, если вьюпорт и вьюбокс имеют разные соотношения сторон. Если соотношения сторон совпадают, и содержимое умещается без полей, preserveAspectRatio работать не будет (в этом случае в нём просто нет необходимости).

Для использования SVG в качестве иконок достаточно viewBox и размеров, но если предполагается делать что-то более сложное, имеет смысл разобраться с единицами измерения и системой координат.

Единицы измерения

Внутри SVG можно использовать em , ex , px , pt , pc , cm , mm , in , проценты, а также единицы системы координат (user space units). Единицы системы координат соответствуют пикселям, поэтому для значений в пикселях единицы измерения указывать не нужно.

Системы координат

В SVG-документе есть две системы координат:

1. Система координат области отрисовки — viewport space.
2. Система координат содержимого — user space.

Отсчет системы координат вьюпорта начинается от левого верхнего угла вьюпорта, системы координат содержимого — от левого верхнего края вьюбокса.

По умолчанию система координат содержимого соответствует системе координат вьюпорта, а единицы измерения содержимого — единицам измерения вьюпорта, но при использовании трансформаций или viewBox масштабируется вся система координат с единицами измерения, то есть пиксели из user space больше не равны пикселям из viewport space.

Поизменяйте размеры элемента и посмотрите что происходит с системой координат содержимого (она показана бирюзовым):

Система координат содержимого начинается из точки 0,0, и если вьюпорт и вьюбокс не совпадают, точка отсчета, как и вся система координат содержимого, будет ездить и масштабироватся вместе с вьюбоксом.

Масштабирование единиц измерения хорошо видно на примере обводки: изначально её толщина равна единице, но при изменении размеров видимая толщина обводки будет изменяться вместе с фигурой:

Если такое поведение нежелательно, это можно исправить с помощью свойства vector-effect со значением non-scaling-stroke , оно добавляется к содержимому SVG:

vector-effect можно задавать как атрибутом, так и в CSS.

Также новая система координат создается при добавлении трансформаций:

Внутри трансформируемого элемента будет своя своя система координат, отличная от систем координат вьюпорта и вьюбокса.

Тема может выглядеть сложной, но на самом деле, достаточно немного поиграться с кодом, и всё станет понятно. Для лучшего понимания систем координат, размеров и трансформаций в SVG рекомендую демо Сары Суайдан, а также её статьи:

Источник

SVG не соответствует родительскому контейнеру, preserveAspectRatio не работает должным образом

У меня есть SVG, который, как я ожидаю , будет масштабироваться до размера его родительского контейнера. Допустим, для аргумента родительский контейнер width: 10rem; height: 10rem; Я ожидаю, что следующее:

На SVG размер SVG будет соответствовать его родительскому контейнеру и центрировать его по осям X и Y. Это не работает, и я все еще пытаюсь разобраться в волшебной работе viewBox. Например, чем меньше я делаю числа (второй набор чисел), тем больше SVG находится в viewBox.

В коде я хочу, чтобы SVG был центрирован по вертикали и горизонтали и заполнил доступное серое пространство.

2 ответа

Ваше изображение составляет половину размера пользовательского окна просмотра viewBox .

Чтобы увеличить изображение вдвое, необходимо уменьшить viewBox вдвое viewBox=»0 0 50 50″

Первый вариант решения удовлетворяет условиям вопроса, но не является адаптивным.

Чтобы svg изменил свой размер вместе с изменением размера родительского контейнера, вы должны указать его ширину и высоту в процентах.

Теперь увеличение, уменьшение процента ширины и высоты родительского контейнера .viewport также точно изменит размер SVG

Изменение viewBox на viewBox=»-3 0 50 50″ исправит это. Я думаю, вы не можете получить равную ширину и высоту, чтобы соответствовать svg квадратному div, потому что он должен сохранять пропорции.

Источник

preserveAspectRatio

The preserveAspectRatio attribute indicates how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio.

Because the aspect ratio of an SVG image is defined by the viewBox attribute, if this attribute isn’t set, the preserveAspectRatio attribute has no effect (with one exception, the element, as described below).

Example

Syntax

Its value is made of one or two keywords: A required alignment value and an optional «meet or slice» reference as described below:

The alignment value indicates whether to force uniform scaling and, if so, the alignment method to use in case the aspect ratio of the viewBox doesn’t match the aspect ratio of the viewport. The alignment value must be one of the following keywords:

• none Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element’s bounding box exactly matches the viewport rectangle. Note that ifis none , then the optionalvalue is ignored.
• xMinYMin — Force uniform scaling. Align the of the element’s viewBox with the smallest X value of the viewport. Align the of the element’s viewBox with the smallest Y value of the viewport.
• xMidYMin — Force uniform scaling. Align the midpoint X value of the element’s viewBox with the midpoint X value of the viewport. Align the of the element’s viewBox with the smallest Y value of the viewport.
• xMaxYMin — Force uniform scaling. Align the + of the element’s viewBox with the maximum X value of the viewport. Align the of the element’s viewBox with the smallest Y value of the viewport.
• xMinYMid — Force uniform scaling. Align the of the element’s viewBox with the smallest X value of the viewport. Align the midpoint Y value of the element’s viewBox with the midpoint Y value of the viewport.
• xMidYMid (the default) — Force uniform scaling. Align the midpoint X value of the element’s viewBox with the midpoint X value of the viewport. Align the midpoint Y value of the element’s viewBox with the midpoint Y value of the viewport.
• xMaxYMid — Force uniform scaling. Align the + of the element’s viewBox with the maximum X value of the viewport. Align the midpoint Y value of the element’s viewBox with the midpoint Y value of the viewport.
• xMinYMax — Force uniform scaling. Align the of the element’s viewBox with the smallest X value of the viewport. Align the + of the element’s viewBox with the maximum Y value of the viewport.
• xMidYMax — Force uniform scaling. Align the midpoint X value of the element’s viewBox with the midpoint X value of the viewport. Align the + of the element’s viewBox with the maximum Y value of the viewport.
• xMaxYMax — Force uniform scaling. Align the + of the element’s viewBox with the maximum X value of the viewport. Align the + of the element’s viewBox with the maximum Y value of the viewport.

Meet or slice reference

The meet or slice reference is optional and, if provided, must be one of the following keywords:

• meet (the default) — Scale the graphic such that:
  • aspect ratio is preserved
  • the entire viewBox is visible within the viewport
  • the viewBox is scaled up as much as possible, while still meeting the other criteria

  In this case, if the aspect ratio of the graphic does not match the viewport, some of the viewport will extend beyond the bounds of the viewBox (i.e., the area into which the viewBox will draw will be smaller than the viewport).

• slice — Scale the graphic such that:
  • aspect ratio is preserved
  • the entire viewport is covered by the viewBox
  • the viewBox is scaled down as much as possible, while still meeting the other criteria

  In this case, if the aspect ratio of the viewBox does not match the viewport, some of the viewBox will extend beyond the bounds of the viewport (i.e., the area into which the viewBox will draw is larger than the viewport).

Elements

You can use this attribute with the following SVG elements:

feImage

For , preserveAspectRatio defines how the referenced image should fit in the rectangle define by the element.

Value	?
Default value	xMidYMid meet
Animatable	Yes

image

For , preserveAspectRatio defines how the referenced image should fit in the rectangle define by the element.

Value	?
Default value	xMidYMid meet
Animatable	Yes

marker

For , preserveAspectRatio indicates if a uniform scaling must be performed to fit the element viewport.

Value	?
Default value	xMidYMid meet
Animatable	Yes

pattern

, preserveAspectRatio indicates if a uniform scaling must be performed to fit the element viewport.

Value	?
Default value	xMidYMid meet
Animatable	Yes

For , preserveAspectRatio indicates if a uniform scaling must be performed to fit the element viewport.

Value	?
Default value	xMidYMid meet
Animatable	Yes

symbol

For , preserveAspectRatio indicates if a uniform scaling must be performed to fit the element viewport.

Value	?
Default value	xMidYMid meet
Animatable	Yes

For , preserveAspectRatio indicates if a uniform scaling must be performed to fit the element viewport.

Источник