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

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

Математическая / декартовой системы координат

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

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

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

Тоесть при увеличении ув SVG, точка двигаться вниз

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

По умолчанию используются пиксели px

Ед. измОписание
emРазмер шрифта по умолчанию - как правило, высота символа.
exВысота символа x
pxПиксели
ptПункты (1/72 дюйма)
pcПики (1/6 дюйма)
cmсантиметры
mmмиллиметры
inдюймы

Единицы, заданные на для <svg>элемента в widthи heightвлияют только на сам <svg>элемент (окно просмотра). Для каждого элемента внутри <svg>элемента должны быть установлены свои собственные единицы.

  1. SVG
  2. HTML