Координатная система SVG

Как и координатная система, используемая многими компьютерными графическими приложениями, SVG также использует координатную систему сетки. Эта координатная система имеет следующие особенности: исходной точкой системы координат является левый верхний угол (0,0), ось X направлена вправо, от точки 0,0 начинается вправо, x постепенно увеличивается. Ось Y направлена вниз, от точки 0,0 начинается вниз, y постепенно увеличивается. Координаты выражены в пикселях

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

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

В прямоугольной координатной системе точка x=0, y=0 находится в нижнем левом углу графики. С увеличением x точка перемещается вправо в системе координат. При уменьшении x точка перемещается влево в системе координат. С увеличением y точка перемещается вверх в системе координат. При уменьшении y точка перемещается вниз в системе координат.

Это иллюстрация обычной графической координатной системы, нижний левый угол 0,0:

SVG-координатная система

В SVG-координатной системе точка x=0, y=0 находится в левом верхнем углу. Таким образом, по сравнению с обычной графической координатной системой, ось y обратна. С увеличением y в SVG точка, форма и т.д. двигаются вниз, а не вверх.

Это иллюстрация SVG-координатной системы, левый верхний угол 0,0:

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

Можно определить,何种单位对应SVG-координатам. Эта операция может быть выполнена в любом месте, где можно указать координаты (положение x и y, ширину и высоту и т.д.). Вы можете указать единицу измерения после значения, например, 10см или 125мм.

Если после значения координаты не указана ни одна из единиц измерения, то предполагается, что единицей измерения является пиксель (px).

Вот список единиц измерения, которые можно использовать вместе с элементами SVG:

В атрибутах width и height элемента <svg> установленные единицы измерения влияют только на этот элемент (viewport).Формы, находящиеся внутри элемента <svg>, должны устанавливать свои единицы измерения.Таким же образом, если единицы измерения не указаны, то по умолчанию используется единица измерения пиксели.