Skip to content

Latest commit

 

History

History
78 lines (57 loc) · 3.13 KB

6.SVG坐标系.md

File metadata and controls

78 lines (57 loc) · 3.13 KB
Raw

SVG坐标系

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坐标系

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

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

<%-- y-axis --%> <%-- arrow --%> 
&lt;%-- x-axis --%&gt;
<line x1="10" y1="10" x2="110" y2="10" style="stroke:#006600;"></line>
&lt;%-- arrow --%&gt;
<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>元素内部的图形必须有自己的单位设置。再强调一次，如果没有指定单位，则单位默认为像素。