Viewport и ViewBox SVG

Viewport (Viewport) и viewbox SVG-изображения могут настраивать размер видимой части изображения.

Разница между viewport и viewbox

1. viewport - это viewport, который соответствует экрану монитора.

2. viewbox - это зона просмотра, которая соответствует вырезанию небольшого участка экрана и увеличению его до всего экрана, что создает эффектclose-up.

3. preserveAspectRatio определяет способ выравнивания и масштабирования viewbox по отношению к viewport.

Viewport (Viewport)

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

Вы можете использовать атрибуты width и height элемента для определения размера вид (Viewport) <svg>. Вот пример:

<svg width="500" height="300"></svg>

В этом примере определен вид (Viewport) 500 единиц шириной и 300 единиц высотой.

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

Если вы не указали ни одной единицы в атрибутах width и height, то единицей по умолчанию будет пиксель. То есть, width500 означает 500 пикселей.

Если вам нравится использовать единицы, отличные от пикселей, вы можете. Вот список единиц, которые можно использовать с элементом <svg>:

Единицы, установленные вами на элементе <svg>, влияют только на размер элемента <svg> (просмотровая рамка (Viewport)). Размер форм <svg>, отображаемых в изображении SVG, определяется единицами, которые вы устанавливаете для каждого形状. Если единицы не указаны, они будут по умолчанию в пикселях.

Вот пример, который показывает элемент <svg> с группой единиц, которая содержит формы с своими наборами единиц:

<svg width="10cm" height="10cm">
　　　　<rect x="50" y="100" width="50" height="50">
　　　　　　　　　　style="stroke: #000000; fill: none;"/>
　　　　<rect x="100" y="100" width="50mm" height="50mm">
　　　　　　　　　　style="stroke: #000000; fill: none;" />
</svg>

У изображения <svg> есть свои настройки единиц. У двух элементов <rect> свои наборы единиц. Один использует пиксели (без явно установленных единиц) и другие используют width и height в mm.

Вот созданное изображение. Обратите внимание, что правая рамка (с шириной и высотой в единицах mm) больше левой рамки.

Просмотровая рамка (ViewBox)

Вы можете重新 определить значение координат без единиц в элементе <svg>. Вы можете использовать атрибут viewBox для выполнения этой операции. Вот пример:

<svg width="500" height="200" viewBox="0 0 50 20">
　　　　<rect x="20" y="10" width="10" height="5">
　　　　　　　　　　style="stroke:　#000000;　fill:none;"/>
</svg>

Этот пример создает элемент <svg> с шириной 500 пикселей и высотой 200 пикселей. Свойство viewBox элемента <svg> содержит четыре координаты. Эти координаты определяют рамку видимой области (ViewBox) элемента <svg>. Координаты - это x, y, width, height координаты рамки видимой области (ViewBox).

В этом случае, рамка видимой области (ViewBox) начинается с 0,0 и имеет ширину 50, высоту 20. То есть, элемент <svg> с размерами 500 x 200 пикселей использует координатную систему от 0,0 до 50,20.换句话说, каждый единицу <svg> в координатах внутренних форм соответствует 10 пикселям ширины (500/50 = 10 пикселей), высота соответствует 10 пикселям (200/20 = 10 пикселей). Это объясняет, почему прямоугольник с координатами 20,10 на самом деле расположен в 200,100, и его ширина (10) и высота (5) соответствуют 100 пикселям и 50 пикселям.

Другой способ интерпретации - это то, что первые две координаты в свойстве viewBox элемента <svg> определяют координаты пользователя левого верхнего угла элемента, последние две координаты определяют координаты пользователя правого нижнего угла. Пространство внутри <svg> интерпретируется как от координаты верхнего левого угла до координаты нижнего правого угла рамки видимой области (ViewBox).

Эффект изображения после выполнения:

Обратите внимание, что все координаты внутри элемента <rect> интерпретируются как 10 пикселей единицы.

Сохранять пропорции

Если пропорции видимой области (Viewport) и рамки видимой области (ViewBox) различаются,则需要 определить, как SVG-просмотрщик (например, браузер) будет отображать изображение SVG. Вы можете выполнить это с помощью атрибута preserveAspectRatio элемента <svg<.

Атрибут preserveAspectRatio принимает два значения, разделенные пробелом. Первый值 указывает, как рамка видимой области (ViewBox) выравнивается внутри видимой области (Viewport). Это значение本身 состоит из двух частей. Второй значение указывает, как сохранять пропорции (если они есть).

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

Комбинируя компонент Y, добавленный после компонента X, можно создать одно значение. Вот два примера:

xMaxYMax
xMidYMid

Эти два примера различаются способом выравнивания области просмотра (ViewBox) и области просмотра (Viewport). В первом примере правый край области просмотра выравнивается с правым краем области просмотра. Во втором примере середина области просмотра выравнивается с серединой области просмотра.

Вторая часть значения preserveAspectRatio может принимать три различных значения:

Вторая часть значения preserveAspectRatio добавляется ко первой части и отделяется пробелом. Вот два примера:

preserveAspectRatio="xMidYMid meet"
preserveAspectRatio="xMinYMin slice"

Я еще не обсуждал эффекты различных настроек preserveAspectRatio, поэтому давайте посмотрим.

В следующих примерах width установлено в 500, height установлено в 75, атрибут viewBox установлен в 0 0 250 75. Это означает, что по оси X каждый единичный координатный элемент будет соответствовать двум пикселям, но по оси Y каждый единичный координатный элемент будет соответствовать только одному пикселю. Как вы видите, пропорция по оси X составляет 500/250 = 2, а по оси Y составляет 75/75 = 1. Это может привести к искажению изображения, но в следующем примере мы увидим, как различные настройки preserveAspectRatio обрабатывают эти настройки.

Это пример с установленной preservationAspectRatio xMinYMin meet. Это гарантирует сохранение пропорций и масштабирование области просмотра (ViewBox) для соответствия области просмотра (Viewport). То есть, масштабирование области просмотра (ViewBox) в зависимости от меньшего из двух пропорций (отношение по оси Y равно 1). Из-за компонента xMinYMin область просмотра (ViewBox) будет расположена в верхнем левом углу области просмотра (Viewport). Вот код и созданное изображение:

<svg　width="500"　height="75"　viewBox="0　0　250　75"　preserveAspectRatio="xMinYMin　meet"
　　　　　style="border:　1px　solid　#cccccc;">
　　　　<rect　x="1"　y="1"　width="50"　height="50"
　　　　　　　　　　style="stroke:　#000000;　fill:none;"/>
</svg>

Во втором примере значение preserveAspectRatio установлено в xMinYMin slice. Это позволяет сохранить соотношение сторон, но масштабирует рамку видимой области (ViewBox) в зависимости от более высокого соотношения сторон (соотношение сторон по оси x составляет 2), что приводит к тому, что изображение становится слишком большим и не влезает в видимую область (Viewport). Изображение называется «срезом».

<svg　width="500"　height="75"　viewBox="0　0　250　75"　preserveAspectRatio="xMinYMin　slice"
　　　　　style="border:　1px　solid　#cccccc;">
　　　　<rect　x="1"　y="1"　width="50"　height="50"
　　　　　　　　　　style="stroke:　#000000;　fill:none;"/>
</svg>

В третьем примере значение preserveAspectRatio установлено в none. Это означает, что рамка видимой области (ViewBox) заполнит всю видимую область (Viewport), что приведет к искажению изображения, так как соотношение сторон по осям x и y не совпадает.

<svg　width="500"　height="75"　viewBox="0　0　250　75"　preserveAspectRatio="none"
　　　　　　style="border:　1px　solid　#cccccc;">
　　　　　<rect　x="1"　y="1"　width="50"　height="50"
　　　　　　　　　　　style="stroke:　#000000;　fill:none;"/>
</svg>

Выравнивание рамки видимой области (ViewBox)

До сих пор все примеры, которые были показаны, использовали это значение xMinYMin. В зависимости от того, как вы хотите выровнять видимой области (Viewport) рамку видимой области (ViewBox), вы можете использовать другие настройки. Я хочу более подробно изучить, как работают эти настройки, но сначала давайте посмотрим на пример:

<svg　width="500"　height="100"　viewBox="0　0　50　50"　　　　
preserveAspectRatio="xMinYMin　meet"　　　　
style="border:　1px　solid　#cccccc;">　　　　
<circle　cx="25"　cy="25"　r="25"　　　　
style="stroke:　#000000;　fill:none;"/>　　　　
</svg>　　　　
<svg　width="500"　height="100"　viewBox="0　0　50　50"　　　　
preserveAspectRatio="xMidYMin　meet"　　　　
style="border:　1px　solid　#cccccc;">　　　　
<circle　cx="25"　cy="25"　r="25"　　　　
style="stroke:　#000000;　fill:none;"/>　　　　
</svg>　　　　
<svg　width="500"　height="100"　viewBox="0　0　50　50"　　　　
preserveAspectRatio="xMaxYMin　meet"　　　　
style="border:　1px　solid　#cccccc;">　　　　
<circle　cx="25"　cy="25"　r="25"　　　　
style="stroke:　#000000;　fill:none;"/>　　　　
</svg>

Этот пример показывает <svg> с элементами width 500 и height установлены в 100. viewBox установлено в 0 0 50 50. Это приведет к соотношению сторон по оси X 500/50 = 10, по оси Y 100/50 = 2. Радиус круга в изображении составляет 25, что делает его шириной 50 единиц и высотой 50 единиц. Поэтому он заполнит весь диапазон просмотра (ViewBox) (а не диапазон просмотра (Viewport)).

При использовании знака meet окно просмотра (ViewBox) будет масштабироваться по оси Y, так как его соотношение сторон меньше. Это означает, что окно просмотра (ViewBox) будет заполнено по оси Y (вертикально) на весь диапазон просмотра (Viewport), но только по оси X (горизонтально) на 2 * 50 пикселей = 100 пикселей (соотношение сторон * размер окна просмотра (ViewBox) по оси X). Поскольку ширина диапазона просмотра (Viewport) составляет 500 пикселей, вам необходимо указать, как выровнять окно просмотра (ViewBox) в диапазоне просмотра (Viewport) по горизонтали. Это делается с помощью значений xMin, xMid и xMax в первой части подчасти preserveAspectRatio свойств.

Здесь есть три изображения, которые показывают использование xMinYMin meet, xMidYmin meet и xMaxYmin meet в свойстве preserveAspectRatio. Обратите внимание, как рамка выравнивается с левой, центральной и правой сторонами (в зависимости от настроек).

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

Это以前的 пример,但现在 с width100 и height200:

Размеры окна просмотра (ViewBox) одинаковые, поэтому соотношение сторон по оси Y (200/50 = 4) больше, чем по оси X (100/50 = 2). Поэтому окно просмотра (ViewBox) будет заполнено в направлении оси X, а не оси Y. Это означает, что необходимо указать выравнивание по оси Y для окна просмотра (ViewBox).

<svg width="100" height="200" viewBox="0 0 50 50" preserveAspectRatio="xMinYMin meet" style="border: 1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>
<svg width="100" height="200" viewBox="0 0 50 50" preserveAspectRatio="xMinYMid meet" style="border: 1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>
<svg width="100" height="200" viewBox="0 0 50 50" preserveAspectRatio="xMinYMax meet" style="border: 1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>

Это три изображения, каждое из которых показывает возможное значение y-смещения YMin, YMid и YMax для использования подэлементов: