6.SVG坐标系

• 视频版

• 数学/笛卡尔坐标系

• SVG坐标系

• 坐标系单位

SVG坐标系（和大多数其它计算机图形）与数学、图形等坐标系有点不同。

视频版

下面是本教程的视频版：

数学/笛卡尔坐标系

一般的笛卡尔坐标系中，x=0,y=0坐标点在在图标的左下角。随着x的增加，点在坐标系中向右移动。随着x的减小，点在坐标系中向左移动。随着y增加，点在坐标系中向上移动。随着y减小，点在坐标系中向下移动。

下面是一个正常的坐标系的例子，0,0点在左下角：

SVG坐标系

在SVG坐标系中，x=0,y=0点在左上角。与正常的图坐标系相比，y轴被反转。随着SVG中y的增加，点、形状等向下移动，而不是向上。

下面是一个0,0点在左上角的SVG坐标系的例子：

<%-- y-axis --%> <%-- arrow --%> <%-- x-axis --%> <%-- arrow --%>

坐标系单位

你可以指定SVG坐标系中对应的1个单位。你可以到处都指定一个坐标（x和y位置，width和height等）。你也可以在值后面指定单位，例如10cm或125mm。

如果你没有在坐标值后面指定任何单位，则假定单位为像素（px）。

以下是可用于SVG元素的单位列表：

Unit  Description
em    The default font size - usually the height of a character.
ex    The height of the character x
px    Pixels
pt    Points (1 / 72 of an inch)
pc    Picas (1 / 6 of an inch)
cm    Centimeters
mm    Millimeters
in    Inches

你在<svg>元素上设置的width和height属性，只会影响<svg>元素（视窗）。<svg>元素内部的图形必须有自己的单位设置。再强调一次，如果没有指定单位，则单位默认为像素。