SVG坐标系统及图形变换

前面的话

  前面介绍过SVG视野后,本文将开始介绍SVG坐标系统及图形变换  

坐标定位

  对于所有元素,SVG使用的坐标系统或者说网格系统,和Canvas用的差不多(所有计算机绘图都差不多)。这种坐标系统是:以页面的左上角为(0,0)坐标点,坐标以像素为单位,x轴正方向是向右,y轴正方向是向下
  定义一个矩形,即从左上角开始,向右延展100px,向下延展100px,形成一个100*100大的矩形
<rect x="0" y="0" width="100" height="100" />
 

四个坐标系

  SVG中的四个坐标系包括用户坐标系、自身坐标系、前驱坐标系和参考坐标系。其中,用户坐标系和自身坐标系是客观的坐标系,而前驱坐标系和参考坐标系是相对的坐标系 【用户坐标系】   SVG的世界是无穷大的,世界里面的坐标系就是用户坐标系   viewBox的设置就是观察用户坐标系的哪个区域。比如设置viewBox = "0 0 200 150",即观察用户坐标系里的这个区域

  用户坐标系是最原始的坐标系,其他的坐标系都是基于用户坐标系产生的。因此,用户坐标系也被称为原始坐标系
【自身坐标系】   自身坐标系是每个SVG图形或图形分组与生俱来的坐标系   比如一个矩形设置为<rect x="0" y="0" width="100" height="100"/>,其位置和尺寸的定义都是基于其自身坐标系来描述的
【前驱坐标系】   前驱坐标系即该元素的父元素的坐标系   如下所示,矩形rect的父元素是SVG元素,即其前驱坐标系是用户坐标系
<svg version="1.1" width="300" height="70" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="50"/> </svg>
坐标变换   所谓坐标变换,指前驱坐标系经过元素的变换后,得到元素的自身坐标系   如下所示,加入transform属性之后,rect元素就是相对于其前驱坐标系发生了坐标变换,得到了自身坐标系
【参考坐标系】   使用其他坐标系来观察自身元素坐标位置时使用   如下所示,rect元素定义的坐标是(0,0)。如果以用户坐标系作为参考坐标系,则rect元素在参考坐标系中的坐标是(50,50)
 

图形变换

  在SVG中,坐标变换是对一个坐标系到另一个坐标系的变换的描述   在2D平面上,一般采用线性变换来满足变换的需求。SVG中的线性变换使用transform属性来完成   SVG中的transform属性与CSS3中的transform样式里面的一些基本的变换类型是一样的,包括:位移translate, 旋转rotate, 缩放scale, 斜切skew以及直接矩阵matrix。但只局限于2D层面的变换。SVG似乎只支持二维变换,且类似translateXrotateX也都是不支持的 【平移】   translate()变形方法把元素移动一段距离,可以根据相应的属性定位它
<rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
  该示例将呈现一个矩形,移到点(30,40),而不是出现在点(0,0)   [注意]如果没有指定第二个值,它默认被赋值0
【旋转】   使用rotate()变形旋转一个元素
<rect x="20" y="20" width="20" height="20" transform="rotate(45)" />
  该示例显示了一个方形,旋转了45度。rotate()的值是用角度数指定的
【缩放】   scale()变形改变了元素的尺寸。它需要两个数字,作为比率计算如何缩放。0.5表示收缩到50%。如果第二个数字被忽略了,它默认等于第一个值
<rect x="20" y="20" width="20" height="20" transform="scale(0.5)" />
【斜切】   在前面的一些变换中,例如位移、缩放之类是不支持translateXscaleX这种CSS常见用法的,但是这里的skew却有点不同:不支持skew(x[, y])这种语法,而只能是skewX或者skewY   利用一个矩形制作一个斜菱形。可用skewX()变形和skewY()变形。每个需要一角度以确定元素斜切到多远
<rect x="20" y="20" width="20" height="20" transform="skewX(45)" />
【matrix()】   所有上面的变形可以表达为一个2x3的变形矩阵。组合一些变形,可以直接用matrix(a, b, c, d, e, f)变形设置结果矩阵,利用下面的矩阵,它把来自上一个坐标系统的坐标映射到新的坐标系统:
【变换列表】   线性变换列表表示为一系列的变换,结果为变换的矩阵的乘积。要特别注意的是,后面的变换要乘在前面
 

居中变换

  像缩放、斜切这些SVG变换,想要如CSS transform-origin:50% 50%一样的中心点变换效果,下面有两个思路可供参考 【原始中心位置位于SVG左上角】   拿45度旋转举例,可以把元素默认就放在中心点和SVG左上角重合的位置上
<rect x="-100" y="-50" width="200" height="100"/>
【viewBox】   可以把元素默认挂在左上角,然后,通过设置viewBox,让元素呈现的位置并不是真正的左上角,例如应用viewBox='-140 -105 280 210'
  此时,只需要让元素旋转就可以了,无需额外的做translate位移
  欢迎交流   
posted @ 2017-09-08 11:34 小火柴的蓝色理想 阅读(...) 评论(...) 编辑 收藏