svg viewBox атрибут

Question

Я изучаю svg из его официальных документов, есть такая строка. Я не понимаю, если у него уже есть атрибут width и height, то в чем смысл указывать его снова в viewBox="0 0 1500 1000"? В нем говорится: «Единица« один пиксель »определяется как одна единица пользователя. Таким образом, длина« 5px »совпадает с длиной« 5 »в официальных документах, поэтому этот viewBox имеет ширину 1500 пикселей и 1000 высоты, что превышает 300px и 200px. Итак, почему он определяет значение ширины и высоты в первую очередь?

<svg width="300px" height="200px" version="1.1" 
     viewBox="0 0 1500 1000" preserveAspectRatio="none" 
     xmlns="http://www.w3.org/2000/svg"> 

Answer 1

Ширина и высота, насколько велика <svg> есть. ViewBox контролирует, как отображается его содержимое, поэтому viewBox = «0 0 1500 1000» уменьшит содержимое элемента <svg> в 5 раз (1500/300 = 5 и 1000/200 = 5), и содержимое будет 1/5 размер будет без вида, но <svg>

Представьте, что у вас есть эластичная поверхность и разрезаны на 4 равные части. Если вы выбросите 3 части, вы получите поверхность размером 1/4 от поверхности оригинала. Если вы теперь растянете поверхность и сделаете ее того же размера, что и исходная поверхность, тогда все на поверхности будет в два раза больше. Вот как связаны viewBox и ширина/высота.

Answer 2

Если вы не указали окно просмотра, все единичные числа в элементе считаются пикселями. (и SVG предполагает 90 точек на дюйм или пиксели на дюйм для преобразования от единиц, таких как cm к пикселям.)

Окно просмотра позволяет вам делать единицы измерения без пробелов в элементах, означая «единицы пользователя» и указывает, как эти единицы отображаются на размер. Для простоты рассмотрим только координаты x, то есть линейку. В вашем окне просмотра указано, что ваш линейка будет иметь 1500 единиц, чтобы соответствовать ширине размера svg на 200 пикселей.

Линейный элемент от 0 до 1500 (без единицы измерения, то есть пользовательские единицы) растягивает 200 пикселей, как показано на рисунке, по ширине рисунка svg.

(А поскольку SVG масштабируется без потери разрешения, пиксели действительно не значат в реальном мире, когда пользователь изменяет масштаб изображения в или вне.)

Его преобразования координат, своего рода.

Предлагаю вам научиться из книги типа «SVG Essentials», около 10 долларов США, из которой я процитирую этот ответ.

Answer 3

По умолчанию

<svg width="300" height="200"> 

«правителя» из SVG сетки в пикселях (все формы в этом формате SVG измеряется в пикселях)

Но вы хотите использовать свои собственные блоки, которые можно использовать Viewbox атр для этого:

<svg width="300" height="200" viewBox="0 0 1500 1000"> 

Это означает, что:

горизонтальная ось: 1500 (ваш ширина блока) = 300px => 1 (ваш ширина блока) = 300/1500px = 1/5px

вертикальная ось: 1000 (ваш рост единица) = 200px => 1 (Ваша высота блока) = 200/1000px = 1/5px

• Теперь все формы в SVG будет масштабироваться:

их ширины масштабироваться до 1/5px (1/5 < 1 => масштаб вниз) по сравнению с началом.

их высоты также масштабировать до 1/5px (1/5 < 1 => масштабирование вниз) по сравнению с происхождения