SVG坐标系统与SVG视口(ViewPort)

SVG坐标系统与SVG视口(ViewPort)

SVG坐标系统与SVG视口(ViewPort)
2008.09.12 黄凯伟
　　介绍SVG坐标系统与SVG视口(ViewPort)知识，通过SVG坐标与常见的测量坐标系统的比较，让我们了解SVG坐标的特点。SVG中的坐标系统是由横坐标轴(X轴)、纵坐标轴(Y轴)和原点组成，跟常见的测量坐标系不同的是，SVG的坐标系统的原点在左上角而不是右下角。
　　SVG中的坐标系统是由横坐标轴(X轴)、纵坐标轴(Y轴)和原点组成，跟常见的测量坐标系不同的是，SVG的坐标系统的原点在左上角而不是右下角，SVG的坐标系统也被称为工作区坐标系统或者矩阵坐标系统。如图1所示。

　　SVG的渲染都是在一个矩形区域内发生的，这个有限的矩形区域在SVG中被称为“视口”，超出这个视口的图形将不被显示，所以视口也就是SVG的渲染区域，用户能看到的SVG内容的区域。SVG客户端在解析渲染一个SVG文件前，会根据实际显示设备的参数来确定视口的参数，比如视口的一个像素代表实际显示设备尺寸的多少毫米等。在获取这些有效参数后，SVG客户端就会初始化视口，建立以像素为单位的SVG坐标系统。SVG的视口尺寸由<SVG>根标签的“width”和"height"两个属性来决定，也就是SVG整个图像在浏览器中显示的大小，使得视口的坐标系统同用户坐标系统相同。如果有若干个<svg>元素嵌套在一起，那么决定初始化视口的是最外层的那个<svg>元素。


坐标系统初始化的SVG实例

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
".1/DTD/svg11.dtd">
<svg width="300px" height="100px" version="1.1"
xmlns="">
<desc>Example InitialCoords - SVG's initial coordinate system</desc>
<g fill="none" stroke="black" stroke-width="3" >
<line x1="0" y1="1.5" x2="300" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="100" />
</g>
<g fill="red" stroke="none" >
<rect x="0" y="0" width="3" height="3" />

<rect x="297" y="0" width="3" height="3" />
<rect x="0" y="97" width="3" height="3" />
</g>
<g font-size="14" font-family="Verdana" >
<text x="10" y="20">(0,0)</text>
<text x="240" y="20">(300,0)</text>
<text x="10" y="90">(0,100)</text>

</g>
</svg>

　　该实例的SVG视口大小是宽300，高100，单位是像素(px)。从图2中可以看出，SVG坐标系的原点(0,0)在左上角，与视口的左上角完全重合。此时，SVG坐标系同用户坐标系一致，没有发生变形错位的现象。