首页
课程
路径
文章
PHP培训
精品课
下载

技术文章  >  web前端 > H5教程

SVG基础|SVG坐标系统和图形转换

原创
2016-05-17 09:07:26 1664浏览
4.jpg

　　SVG坐标系统

　　坐标系统

　　一个普通的笛卡尔坐标系统的坐标原点(0,0)位于左下角位置，X轴方向上向右是正值，向左是负值。Y轴方向上向上是正值，向下是负值。如下图所示：
2.jpg
　　而SVG的坐标系统坐标原点位于左上角，X轴和笛卡尔坐标系的X轴相同，但是Y轴则刚好相反，如果SVG中点或图形数值增加时往下增长，而不是往上。如下图所示：
3.jpg
　　SVG坐标系统的单位

　　你可以指定在SVG坐标系统值1个单位代表什么。如果你没有明确的指定单位，将会使用像素(px)为单位。下面是SVG元素可以使用的单位：

  • 　　em：默认的字体大小，通常一个字符的高度
  • 　　ex：字符x的高度
  • 　　px：像素
  • 　　pt：点数，1/72英寸
  • 　　pc：Picas，1/6英寸
  • 　　cm：厘米
  • 　　mm：毫秒
  • 　　in：英寸

　　SVG元素转换-TRANSFORM属性

　　SVG元素可以被缩放，移动，倾斜和旋转，就像HTML元素可以使用CSS来转换一样。但是因为坐标系统不同，SVG和HTML元素的转换时有差别的。

　　TRANSFORM属性

　　transform用于在一个元素上指定一个或多个转换效果。它使用一系列预定义的值作为参数，并按先后顺序逐一应用到元素上。

　　SVG可用的转换有：旋转，位移，倾斜和旋转。SVG的transform属性和CSS的transform相似，但是它们的参数不同。

　　矩阵

　　你可以在一个SVG元素上通过matrix()函数来应用一个或多个转换。矩阵转换的语法是：
  1. matrix( )
复制代码
　　上面的声明指定包含6个参数的矩阵变换。matrix(a,b,c,d,e,f)相当于matrix [a b c d e f]。
　
　　位移

　　要移动一个SVG元素，你可以使用translate()函数。位移的语法是：
  1. translate( [])
复制代码

　　translate()函数可以带一个或两个参数，分别用于表示水平或垂直的位移。

　　ty参数是可选的，如果没有指定，它默认是0。tx和ty参数可以使用空格隔开，也可以使用逗号隔开，还有它们不需要使用单位。它们的单位使用的是用户坐标系统的单位。

　　下面的例子将一个SVG元素向右移动100个用户单位，向下移动300个用户单位。
复制代码
　　上面的转换代码也可以写为：translate(100, 300)，使用逗号隔开参数。

　　缩放

　　你可以使用scale()函数来缩放SVG元素。缩放的语法是：
  1. scale( [])
复制代码

　　scale()函数可以带一个或两个参数，分别表示水平或垂直方向上的缩放。

　　sy参数是可选值，如果没有指定，它等于sx的值。sx和sy参数可以使用空格或逗号隔开。并且它们是无单位的数字。

　　下面的例子将一个SVG元素放大到原来尺寸的2倍。
复制代码

　　下面的例子将SVG元素水平方向放大2倍，垂直方向缩小一半。
复制代码

　　同样，我们可以使用逗号来分隔scale()函数的参数，上面的代码可以写为：scale(2, .5)。

　　这里要注意：当一个SVG元素被缩放的时候，整个当前坐标系统也会被同时缩放，导致元素会在viewport中被重新定位。

　　倾斜

　　一个SVG元素也可以被倾斜。要倾斜一个SVG元素，你需要使用skewX或skewY函数。语法如下：
  1. skewX()
  2. skewY()
复制代码

　　skewX函数指定元素绕X旋转，skewY函数指定元素绕Y轴旋转。

　　旋转角度使用的是一个无单位的角度值，默认单位是度(degrees)。

　　注意，元素倾斜也可能会是元素在viewport中重新定位。

　　旋转

　　你可以使用rotate()函数来旋转一个SVG元素。语法如下：
  1. rotate( [])
复制代码

　　rotate()函数通过rotate-angle来指定旋转角度。于CSS转换中的 rotation 不同，你不能为旋转角度指定单位，只能使用度(degrees)为单位。角度值使用的是无单位的数字，默认单位为：度。

　　cx和cy为可选参数，用于代表旋转的中心点。如果没有提供cx和cy值，那么旋转的中心点位于当前用户坐标系统的原点。

　　在rotate()函数中指定中心点就像在CSS中设置transform: rotate()和transform-origin的简写方式。由于SVG默认的旋转中心点位于当前用户坐标系统的左上角(坐标原点)，你创建的旋转效果可能不是你需要的，这时你就需要指定一个新的旋转中心点。如果你知道元素的尺寸和位置，你就可以非常容易的为它指定一个旋转中心点。

　　下面的例子在当前用户坐标系统中将一组SVG元素绕(50,50)中心点旋转45度。

  2. ......
复制代码
　　在CSS中，你想让一个元素绕它的中心旋转，可以指定旋转中心点为50% 50%，但是在SVG rotate()中不可以这样做。你必须使用绝对坐标系统。

　　本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/ziliaoku/ ... g/201506202075.html

HTML5教程 HTML5中国 SVG基础|SVG坐标系统和图形转换 html5cn html5资料 html5文章 hPHP课程HTML视频教程CSS视频JS视频教程Vue视频教程
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
上一条：Canvas画椭圆的方法 下一条：SVG基础|SVG SWITCH 元

相关文章

查看更多
  • 热门课程
打开APP，随时随地在线学习！