svg规范关于transform属性的说明

原创 2007年10月01日 09:40:00

在将svg图形格式转化为其它格式图形的工作中,坐标变换是首当其冲的一件工作,下面我们结合svg规范看看svg
是如何处理坐标变换的,理解了这些,再将其转化成你想要的图形格式的变换方式也就不困难了。
1.svg采用的初始坐标系统是视图坐标系,即屏幕左上角为左边原点,y轴正方向朝下,x轴正方向朝右

2.The value of the transform attribute is a <transform-list>, which is defined as a list of transform  definitions, which are applied in the order provided.
  transform属性的值是一个变换列表,它们将根据在svg文件中的顺序依次起作用。

  解析transform值时,一定要根据各个变换出现的顺序进行处理,而不能根据变换的类型进行处理。 

3.The transform attribute is applied to an element before processing any other coordinate or length values supplied for that element. In the element
  <rect x="10" y="10" width="20" height="20" transform="scale(2)"/>
  the x, y, width and height values are processed after the current coordinate system has been scaled uniformly by a factor of 2 by the transform attribute. Attributes x, y, width and height (and any   other attributes or properties) are treated as values in the new user coordinate system, not the   previous user coordinate system.
  如果一个元素使用了transform属性,那么坐标变换时首先要处理的就是transform属性,然后才是其它的坐标
  或者长度或高度的值。例如,在
    <rect x="10" y="10" width="20" height="20" transform="scale(2)"/>
  这样一个元素中,先要把当前的坐标系统进行乘2变换后,才会处理x,y,width和height属性。x,y,width和height(
  还有一些其它与坐标有关的属性)是在新的坐标系统终的值,而不再是原来的用户坐标系统中的值。
 
  解析处理元素坐标时,首先要处理transform属性,然后才是其它属性。
 

相关文章推荐

理解SVG坐标系统和变换: transform属性

转自: http://www.w3cplus.com/html5/svg-transformations.html SVG元素可以通过缩放,移动,倾斜和旋转来变换-类似HTML元...

svg的transform属性

svg元素的transform属性,用来对一个元素声明了一组转换的定义,该变换可用于这个元素与这个元素的子元素。转换定义的每一项用空格或者逗号隔开,并从右到左被应用。 transform的定义: ma...

SVG元素缩放的问题

SVG元素缩放的问题 页面里嵌入的SVG元素,有时候需要对其进行缩放。 在网上研究了一下,SVG元素的缩放有两种方法。   一种是使用SVG元素的viewBox属性 (参考http://www.dou...
  • tzy233
  • tzy233
  • 2014年01月17日 13:25
  • 2377

SVG坐标系统与坐标转换

这一章非常基础,非常重要,同时也是相对比较难懂一点的,特别是ViewBox与视口的关系 1.坐标系统与视口(ViewPort) SVG中的坐标系统也是由横坐标轴(X轴)、纵坐标轴(Y轴)和...

译文:SVG1.1(第二版)-7.6 ‘transform’ 属性 --未完待续

原文:http://www.w3.org/TR/SVG11/coords.html#TransformAttribute 7 坐标系统,变换及单位->7.6 ‘transform’ 属性'transf...

svg transform 坐标变换方式

转自:http://xofun.iteye.com/blog/1689597 svg transform 坐标变换方式  坐标变换的使用方式:  代码:      ...  1、平移变换...

svg的transform属性

transform属性指定了一组转换定义,这些指定的转换可以被应用到一个元素及其子元素上。这组转换被空格或者逗号隔开,被从右到左被应用。 transform定义的类型:    matrix...

使用SVG内置API计算图形或点经过transform之后的新坐标

一个应用场景是,点击一条路径,显示该路径的控制点。因为有transform变形( 平移、缩放、倾斜、旋转等变换),所以获取变形后的新坐标需要计算。 纯数学的方法,就是用2D变换矩阵的一些公式去运算,...

SVG小记——transform属性,建立新视窗

transform属性值有效地SVG变换有:旋转rotate, 缩放scale, 移动translate, 和倾斜skew。 坐标系变化 transform属性被定义成两个在被添加的元素上建立新用...
  • leo8729
  • leo8729
  • 2015年10月08日 11:11
  • 412

理解SVG transform坐标变换

转自:http://www.zhangxinxu.com/wordpress/?p=4965 一、HTML transform和SVG transform SVG中自带transform属性,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:svg规范关于transform属性的说明
举报原因:
原因补充:

(最多只允许输入30个字)