转换坐标系统： 类似transform，svg元素可以通过缩放，移动，倾斜和旋转来变换。

transform属性：

<rect transform="translate(100)"> css3的transform虽然也可用于svg元素，但是ie不支持。

 

 

css3 transform和svg transform：

相似之处：

基本变换类型一样，包括translate，rotate，scale，skew，matrix。

不同之处：

svg中，transform的坐标变换是相对于（最初坐标系）画布左上角进行计算；

svg transform属性语法略微自带偏移（更加符合svg），css transform更加纯粹（直接的变换）。

svg只支持二维变换。

 

 

 transform="translate( <tx> [<ty>] )";

参数说明：

tx代表x轴上的translation值，

ty代表y轴上的translation值。

ty值是可选的，如果省略，默认值是0。

当多个参数值的时候，可以使用逗号，或者直接空格分隔。

！！！数值中一定一定一定不能包含单位。

特别说明： HTML元素的偏移是相对自己的中心点（直接移动元素），svg元素的偏移是相对svg画布的左上角（整个坐标系统发生偏移，针对偏移后的坐标系统再定义元素位置）。

等价效果： 单纯从位移来讲，无论你相对于哪个位置，实际偏移的位置都是一样的，因此，从表现上讲，两者最终的位置看上去还是一样的。但渲染机制不一样。

 

transform="scale( <sx> [<sy>] )";

参数说明：

sx代表x轴上的缩放值，用来水平延长或者拉伸元素。

sy代表y轴上的缩放值。用来垂直延长或者缩放元素。 sy值是可选的，如果省略，默认值是sx(等比例缩放)。

特别说明： HTML元素的缩放是相对自己的中心点，svg元素的缩放是相对于svg的左上角。 当svg元素缩放时，整个坐标系被缩放，导致元素再视窗中重新定位。

 

transform="skewX(<skew-angle>)"; transform="skewY(<skew-angle>)";

函数skewX声明一个沿x轴的倾斜，函数skewY声明一个沿y轴的倾斜。

分开多次连续斜切最终的坐标偏移要比一次性偏移来得小。

transform="skewX(a1) skewX(a2)"的最终位置和transform="skewX(a1+a2)"是不一样的，因为斜切的角度和元素偏移大小并不是线性的。

斜切尽可能一次到位，不要像前者。

svg绘画各种形状： 矩形<rect>，圆形<circle>，椭圆<ellipse>，线<line>，折线<polyline>，多边形<polygon>。

重要概念：路径<path>

 

<rect>元素会在屏幕上绘制一个矩形。 <rect x=‘x‘ y=‘y‘ rx=‘rx‘ ry=‘ry‘ width=‘width‘ height=‘height‘ />

基本属性： x：矩形左上角的x位置；y：矩形左上角的y位置；width矩形的宽度，height：矩形的高度；rx：圆角的x方位的半径，默认为0；圆角的y方位的半径，默认为0。

 

<circle>元素会在屏幕上绘制一个圆。 <circle cx="cx" cy="cy" r="r" />

基本属性：（都无法省略,省略默认为0） r：圆的半径； cx：圆心的x位置； cy：圆心的y位置；

 

 <ellipse>是circle元素更通用的形式，可以分别缩放圆的x半径和y半径。 <ellipse cx="cx" cy="cy" rx="rx" ry="ry" />

基本属性：（都无法省略,省略默认为0） rx：圆的x半径； ry：圆的y半径； cx：椭圆中心的x位置； cy：椭圆中心的y位置；

 

 <line>绘制直线。 <line x1="x1" y1="y2" x2="x2" y2="y2" />

基本属性：x1：起点的x位置；y1：起点的y位置；x2：终点的x位置；y2：终点的y位置。

 

 <polyline>是一组连接在一起的直线。 <polyline points="x1 y1,x2 y2,x3 y3,........,xn yn" />//建议这样写法。

points：点集数列，每个数字用空白符，逗号，终止命令或者换行符分隔开； 每个点必须包含2个数字，一个是x坐标，一个是y坐标。

 

<polygon>和折线很像，不同的是，polygon的路径在最后一个点处自动回到第一个点。 属性和polyline相同，最后一个点和第一个点会自动闭合。

 

<path>元素不仅能创建其他基本形状，还能创建更多其他形状。

定义属性： path元素的形状是通过属性d定义的，属性d是一个点集数列以及其他关于如何绘制路径的信息，值是一个“命令+参数”的序列。

属性命令： 每个命令都用一个关键字母表示，比如字母M表示的是Move to命令。

每个命令都有两种表示方式：大写字母，表示绝对定位（根据整个坐标系，定位到坐标位置）；小写字母，表示相对定位（在当前基础上，横纵坐标增加xxx）。

属性d采用用户坐标系统，故不需表明单位。

 

 形状里面的属性：fill=""填充颜色，可以用颜色，十六进制，rgb来填写。

fill-opacity="0-1":填充颜色透明度，0-1.

stroke="颜色"：边框颜色。

stroke-width="":边框宽度。

stroke-opacity="":边框的透明度。

opacity=""定义整个元素的透明度。