SVG坐标系(和大多数其它计算机图形)与数学、图形等坐标系有点不同。
下面是本教程的视频版:
<iframe width="560" height="315" src="//www.youtube.com/embed/50Q4x3u1H2A?list=PLL8woMHwr36F2tCFnWTbVBQAGQ6nTcXOO" frameborder="0" allowfullscreen=""></iframe>一般的笛卡尔坐标系中,x=0,y=0坐标点在在图标的左下角。随着x的增加,点在坐标系中向右移动。随着x的减小,点在坐标系中向左移动。随着y增加,点在坐标系中向上移动。随着y减小,点在坐标系中向下移动。
下面是一个正常的坐标系的例子,0,0点在左下角:
<!-- x-axis -->
<line x1="10" y1="110" x2="110" y2="110" style="stroke:#006600;"></line>
<!-- arrow -->
<line x1="105" y1="105" x2="110" y2="110" style="stroke:#006600;"></line>
<line x1="105" y1="115" x2="110" y2="110" style="stroke:#006600;"></line>
在SVG坐标系中,x=0,y=0点在左上角。与正常的图坐标系相比,y轴被反转。随着SVG中y的增加,点、形状等向下移动,而不是向上。
下面是一个0,0点在左上角的SVG坐标系的例子:
<%-- y-axis --%> <%-- arrow --%><%-- x-axis --%>
<line x1="10" y1="10" x2="110" y2="10" style="stroke:#006600;"></line>
<%-- arrow --%>
<line x1="105" y1="5" x2="110" y2="10" style="stroke:#006600;"></line>
<line x1="105" y1="15" x2="110" y2="10" style="stroke:#006600;"></line>
你可以指定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>
元素内部的图形必须有自己的单位设置。再强调一次,如果没有指定单位,则单位默认为像素。