svg 学习笔记
1、svg在html中的几种引用
<!--嵌入式（opera不支持）--> <svg xmlns="http://www.w3.org/2000/svg"> <!--cx=圆心距离svg右边框的距离，即圆心的x坐标 cy=圆心距离svg左边框的距离，即圆心的y坐标 r=圆的半径 --> <circle cx="53" cy="53" r="50" stroke="#f00" stroke-width="3" fill="none"></circle> </svg> <!--优势：所有主要浏览器都支持，并允许使用脚本 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）--> <!--<embed src="xx.svg" type="image/svg+xml"></embed>--> <!--优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准 缺点：不允许使用脚本。--> <!--<object data="xx.svg" type="image/svg+xml"></object>--> <!--优势：所有主要浏览器都支持，并允许使用脚本 缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）--> <!--<iframe src="xx.svg"></iframe>--> <!--还可以用<a>标签链接到一个SVG文件--> <!--<a href="xx.svg">View SVG file</a>-->
2、svg 路径绘制
M = moveto(M X,Y) 将画笔移动到指定的坐标位置
L = lineto(L X,Y) 画直线到指定的坐标位置
H = horizontal lineto(H X) 画水平线到指定的X坐标位置
V = vertical lineto(V Y) 画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY) 三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Bézier curve(Q X,Y,ENDX,ENDY) 二次贝赛曲线
==>X,Y为控制点的位置
==>ENDX,ENDY终点的位置
T = smooth quadratic Bézier curveto(T ENDX,ENDY) 映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y) 弧线
==>RX,RY指所在椭圆的半轴大小
==>XROTATION椭圆的X轴与水平方向顺时针方向夹角,可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。
==>FLAG1只有两个值，1表示大角度弧线，0为小角度弧线
==>FLAG2只有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针
==>X,Y为终点坐标
Z = closepath 关闭路径
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位
3、绘制矩形（rect）
（1）rx和ry属性用于决定矩形圆角的大小
（2）stroke-dasharray 可以将矩形的边框设置成虚线
一个参数时： 表示一段虚线长度和每段虚线之间的间距
两个参数或者多个参数时：一个表示长度，一个表示间距
（3）stroke-linejoin描边转角的表示方式
有三种方式：miter(直角)、round（圆角）、bevel（斜角）
（4）stroke-opacity描边透明度
（5）stroke-linecap描边端点表现形式
有三种方式：butt、round、spuare
（6）fill-opacity填充矩形背景色的透明度
（7）stroke-width描边的线条宽度
（8）fill填充色
（9）stroke描边色
4、绘制圆形（circle）
设置和矩形一致
如果要把圆形设置成椭圆的话，不设置人，设置rx和ry
5、绘制直线（line）
设置和矩形一致
x1,y1设置起点坐标，x2,y2设置终点坐标
6、绘制折线（polyline）
设置和矩形一致
points里面放相应的坐标x和y用，隔开，组与组之间用空格隔开
7、绘制多边形（polygon）
设置和矩形一致
points里面放相应的坐标x和y用，隔开，组与组之间用空格隔开
8、连接标记（markers）
用于标记一条线或者路径的开始、中间、结束位置，路径的开始可以使用圆形或者方向表示，路径的结束可以使用三角箭头表示
（1）markerWidth、markerHeight设置宽、高
（2）refX、refY标记顶点连接的位置
（3）在<marker></marker>里面绘制路径
（4）在p路径上 marker-start: url(#markerCircle);marker-end: url(#markerArrow);marker-mid: url(#markerCircle);来设置起点和终点和中间
（5）marker设置orient="auto"来让图形自适应不同角度的直线
（6）<marker>元素的markerUnits属性的值为strokeWidth对标记进行缩放来适应路径描边的大小
9、绘制文字（text）
（1）text-anchor 设置文字的位置
有三个可选参数：start、middle、end
（2）letter-spacing：文字的间距
（3）kerning：字距调整
（4）word-spacing：单词的间距
（5）transform="rotate(30 20,40)"旋转文字
（6）writing-mode：tb设置文字为垂直
但是英文的时候，字母也被旋转了90度，需要设置glyph-orientation-vertical：90
（7）direction：ltr,rtl
但是英文的时候，字母也会被渲染，需要设置unicode-bidi: bidi-override
10、tspan
dx、dy使一行文本相对于上一行文字定位，如果了里面传多个值的话，那么每一个数字会被应用到每一个字符上
11、textPath绘制 文字路径
xlink:href="#MyPath"指定绘制的路径
但是在svg上面要加上
xmlns:xlink="http://www.w3.org/1999/xlink"
不然图片会生成不了
12、switch
用来绘制文字的, 来匹配不同的语言，在不同的浏览器语言环境中显示不同的SVG文字,但是你不可以用它来显示不同的图形
13、image
这个不知道为什么，用js动态生成的才可以显示出来图片，直接用svg绘制的不可以
14、defs:预定义一个元素，使其能在svg图像中重复使用
在defs中定义的图形，不会直接显示在svg图像上，要显示他们需要使用use元素来引入他们
15、绘制路径（path）
d属性包含了绘制的命令，M代表移动到，A代表弧线，L代表直线
M：是指画笔落下的位置，从这个地方开始绘制
A：绘制弧线:(水平半径，垂直半径，x轴方向上的旋转（默认0），大小弧线（0小、1大），旋转方向（1顺，0逆）)
Z：闭合路径，从最后一个会致电连接到开始点
注意：如果你重复多次连续使用同一个命令，可以可以将其省略，只写后面的参数即可
16、贝塞尔曲线
（1）二次贝塞尔曲线（Q）：（控制点x坐标，控制点y坐标 终点x坐标，终点y坐标）
（1）三次贝塞尔曲线（C）：（控制点1x坐标，控制点1y坐标 控制点2x坐标，控制点2y坐标 终点x坐标，终点y坐标）
17、添加css样式
（1）内联样式，也可以给每个图形添加class类
<style type="text/css" > <![CDATA[ circle { stroke: #006600; fill: #00cc00; } ]]> </style>
（2）外部样式
<?xml-stylesheet type="text/css" href="svg-style.css" ?>
把这个放在svg标签上面
18、决定复杂的图形如何进行填充（fill-rule）
（1）nonzero：
（2）evenodd：
19、viewport
在svg元素中使用width和height属性来指定viewport的尺寸
在SVG中支持的长度单位有：em、ex、pt、px、、pc、cm、mm、in和百分比值
20、viewBox
在svg元素中使用viewBox
