SVG——新一代Web设计及互动媒体的革新

什么是SVG坐标系?

什么是SVG坐标系  SVG的解释程序渲染一个SVG图像之前,先要通过与具体设备的交互通讯来确定视口的尺寸和参数。SVG客户端的解释程序获得以上信息后,首先初始化视口,建立以像素为长度单位的视口坐标系,接着建立用户坐标系以使两者一致,也就是使用户坐标每吨的一个单位等于视口坐标系中的一个像素。

来源:SVG中国(ChinaSVG.COM)

  无论对于什么信息载体和载体设备而言,SVG文件的绘画区域总是抽象地定义为其图像对象所渲染的空间。然而不同的载体其性质是极为不同的。光是显示分辨率一项就存在着巨大的差异。SVG文件在处理这些问题上存在着一定的规则。载体的尺寸虽不确定,但渲染的动作总是在此载体的一个确定的矩形中发生的,这个确定的矩形叫做“视口(Viewport)。对于可视化的载体(如显示器、打印纸等),视口就是绘有SVG图像的那一部分表面。

图1 SVG PreserveAspectRatio属性实例

  视口的属性与具体设备无关,所以在SVG的解释程序渲染一个SVG图像之前,先要通过与具体设备的交互通讯来确定视口的尺寸和参数,一般像素所代表的具体尺寸如多少毫微米等。只有这样,SVG客户端的解释程序才能将一个SVG文件转换成具体设备上的图像。

  SVG客户端的解释程序获得以上信息后,首先初始化视口,建立以像素为长度单位的视口坐标系,接着建立用户坐标系以使两者一致,也就是使用户坐标每吨的一个单位等于视口坐标系中的一个像素。

  渲染SVG文件时,如果SVG文件中的长度值与坐标值等没有规定单位,则缺省地采用用户坐标系的单位,也就是使用像素作度量标准。如果有特定的单位如mm、cm等,则需要经过换算将尺寸转换为用户坐标值。这也是SVG客户端解释程序初始化时,需要第三个参数的原因。

  SVG还有一个功能,即可以定义自己的坐标系。其方法是在一段SVG文本中定义一种叫做变换(Transformation)的格式,其含义类似于解析几何中的坐标变换和映射规则。变换的标式中说明了此变换所作用的对象应该使用什么方式进行平移、缩放、旋转、倾斜等。变换提供了一种整体的方式,用它可对一个或一组图像对象进行变换,改变其比例、位置、形状等,以达到使用自定义坐标系的目的。

  视口也可重新定义,可以重新规定像素所对应的长度值,这样视口所指定的矩形就会与以前完全不同。这种方法可以临时用来缩放一个图像,以便使该图像适合一个具体区域。另外<svg>标记内还有一个“viewBox”属性,它可以把<svg>标记的视口重新缩放映射到自己定义的一个矩形区域,这是整体坐标映射的规则。

  由于SVG中坐标系可变,所以给SVG文档的阅读带来了一些困难,不过好在SVG文档也不是专门用来阅读的。“SVG坐标系统与SVG坐标变换”文章介绍一个SVG的初始化坐标系,而“SVG格式图形显示的坐标系统规则”一文则是该文作者学习SVG坐标系后对其的理解,通过这些文章使读者对SVG绘图的度量格式有一个大致的了解。注意,所有的坐标变换都是以初始坐标系为基础的。

(THE END)

 

将要更新