Атрибут svg viewBox

Я изучаю 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">

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

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

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

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

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

Ответ 3

По умолчанию

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

"линейка" сетки svg находится в пикселях (все фигуры в том, что svg измеряется в пикселях)

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

<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 = > уменьшают масштаб) по сравнению с началом