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属性,然后才是其它属性。
 

HTML5中 svg的animateTransform中rotate类型中围绕点设定

之前在做SVG动画中遇到的问题:在SVG动画效果中,怎么让一个圆围绕另一个动态圆转动,即比如太阳系转动,地球围着太阳转,月球围着地球转,卫星围着地球转。 之后发现可以通过嵌套的方式来达到目的: 先...
  • itslz
  • itslz
  • 2016年09月11日 22:25
  • 1371

理解SVG transform坐标变换

转自:http://www.zhangxinxu.com/wordpress/?p=4965 一、HTML transform和SVG transform SVG中自带transform属性,...
  • auragreen
  • auragreen
  • 2016年08月15日 16:24
  • 1231

svg transform 坐标变换方式

转自:http://xofun.iteye.com/blog/1689597 svg transform 坐标变换方式  坐标变换的使用方式:  代码:      ...  1、平移变换...
  • wujingwen1111
  • wujingwen1111
  • 2014年03月17日 15:17
  • 1179

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

原文:http://www.w3.org/TR/SVG11/coords.html#TransformAttribute 7 坐标系统,变换及单位->7.6 ‘transform’ 属性'transf...
  • wangwangbinbin
  • wangwangbinbin
  • 2011年03月10日 16:05
  • 529

svg的transform属性

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

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

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

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

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

svg中transform的矩阵变换原理

transform的原理是计算机图形学中的2D矩阵变换, 在开始之前,首先来复习下一个简单的线性代数知识:矩阵与向量乘法。太复的用不到,只需要3维向量与3x3矩阵的乘积: 接下来我们来说说tr...
  • luqin1988
  • luqin1988
  • 2013年01月30日 10:03
  • 1874

实例讲解CSS3中Transform的perspective属性的用法

基础 CSS3的transform可以做2D的操作,当然也有3D。 但需要再一个拥有perspective属性的父元素才能显现3D的效果。 例如: XML/HTML Code复制内容到...
  • a1943206465
  • a1943206465
  • 2016年12月27日 20:54
  • 218

UIKit基础:7.UIView的常用属性 - Transform属性的基本认识

前面, 我们讲解了UIView的常用属性的三个, 分别是Frame, Bounds, Center, 现在我们来学学更好玩一些的属性, 它就是Transform属性, 先卖一下关子先, 下面我们来...
  • qq350116542
  • qq350116542
  • 2015年02月11日 14:58
  • 332
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:svg规范关于transform属性的说明
举报原因:
原因补充:

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