svg的一些笔记

svg标签上的属性：

① width 宽度，默认是300，单位px
② height 高度，默认是150，单位px
③ viewBox
使用于法 <svg viewBox=“x1, y1, width, height”> </svg>，四个参数分别是左上角的横纵坐标，视口的宽高，表示只看SVG的某一部分，由上述四个参数决定。

SVG形状元素：

（1）rect 矩形

<svg width="300" height="300">
	<rect x="100" y="20" rx="20" ry="20" width="80%" height="90%" 
		fill="yellow" fill-opacity="0.5" stroke="#f00" stroke-width="4" stroke-opacity="0.2" />
</svg>
x 表示距离浏览器窗口左边框的距离，可以不写
y 表示距离浏览器窗口上边框的距离，可以不写
rx 圆角的X轴弧度，弧度可以不写
ry 圆角的Y轴弧度，弧度可以不写
fill 填充颜色（rgb 值、颜色名或者十六进制值）
fill-opacity 填充颜色的透明度（合法的范围是：0 - 1）
stroke 轮廓颜色
stroke-width 轮廓宽度
stroke-opacity 轮廓颜色的透明度

（2）circle 圆形

<svg width="300" height="300">
	<circle cx="150" cy="100" r="80" fill="green"/>
</svg>
r 表示圆形的半径
fill 填充颜色
cx 圆形的中心点的水平距离，相对于左上角来说
cy 圆形的中心点的垂直距离
圆形的中心点默认的是左上角，即坐标为0 0 

（3）ellipse 椭圆

<svg width="300" height="300">
	<ellipse cx="150" cy="80" rx="100" ry="50" fill="yellow" stroke-width="0"/>
</svg>
cx 圆形的中心点的水平距离，相对于左上角来说
cy 圆形的中心点的垂直距离
rx 椭圆圆心的水平半径
ry 椭圆圆心的垂直半径
fill 填充颜色
stroke-width 轮廓宽度

（4）line 直线

<svg width="300" height="300">
	<line x1="0" y1="0" x2="200" y2="200" 
	stroke="rgb(255,0,0)" stroke-width="2" stroke-linecap="round" 
	stroke-dasharray="20,10,5,5,5,10"/>
</svg>
x1 起始点的水平坐标 X轴
y1 起始点的垂直坐标 Y轴
x2 结束点的水平坐标 X轴
y2 结束点的垂直坐标 Y轴
stroke 轮廓颜色
stroke-width 轮廓宽度
stroke-linecap 线的两端是什么样的，
	可以取值butt、round、square，
	round表示圆角，butt直角，square矩形，
	square与butt差不多，区别是square是在原来的基础上，向直线的两边延伸出来的矩形端点
stroke-dasharray 表示虚线的样子，间距多少，按照设置的间距循环

（5）polyline 多线段

<svg width="300" height="300">
	<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="white" stroke="red" stroke-width="4" />
</svg>
points 属性定义多边形每个角的 X 坐标和 Y 坐标，
	用 空格 隔开每一个点，每一个点有两个数字，逗号前边的是这个点的 X 轴，逗号后边的是这个点 Y 轴
	不会自动闭合
fill 填充颜色
stroke 轮廓颜色
stroke-width 轮廓宽度

（6）polygon 多边形

<svg width="300" height="300">
	<polygon points="100,10 40,198 190,78 10,78 160,198" fill="lime" 
	stroke="purple" stroke-width="1" fill-rule="nonzero" />
</svg>
points 属性定义多边形每个角的 X 坐标和 Y 坐标，
	用 空格 隔开每一个点，每一个点有两个数字，逗号前边的是这个点的 X 轴，逗号后边的是这个点 Y 轴
	注意：会自动闭合（第一个点和最后一个点连接起来），这点与polyline不同
fill 填充颜色
stroke 轮廓颜色
stroke-width 轮廓宽度

fill-rule 属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部” （内部区域将被填充）。
	对一个简单的无交叉的路径，哪块区域是“内部” 是很直观清除的。
	但是，对一个复杂的路径，比如自相交或者一个子路径包围另一个子路径，“内部”的理解就不那么明确了。
nonzero 字面意思是“非零”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。
	从0开始计数，路径从左向右穿过射线则计数加1，从右向左穿过射线则计数减1。
	得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。
evenodd 字面意思是“奇偶”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。
	如果结果是奇数则认为点在内部，是偶数则认为点在外部。
inherit 继承
提示: 上述解释未指出当路径片段与射线重合或者相切的时候怎么办，
	因为任意方向的射线都可以，那么只需要简单的选择另一条没有这种特殊情况的射线即可。

（7）path 路径

<svg width="300" height="300">
	<path d="M150 0 L75 200 L225 200 Z" fill="red" />
</svg>

path 是SVG基本形状中最强大的一个，不仅能创建其他基本形状，还能创建更多其他形状，如贝塞尔曲线、2次曲线等

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

在别人那里扒来的一张图

对照这上边的图，我们看一下 下边的这个例子(菜鸟教程上的例子，有改动)

<svg>
  <path id="lineABC" d="
  M 100 350 //（100，350）是起点的坐标
  l 150 -300   // 画一条直接到 (100+150, 350-300)，因为l 是小写的，所以是相对于前一个点的位置，发生的偏移
  l 150 300		// 画一条直接到 (250+150, 50+300)
  " stroke="red" stroke-width="3" fill="none" />
  
  <path d="M 175 200 l 150 0 M 100 350 
	q 150 -300 300 0  //q 表示贝塞尔曲线，因为是小写的，所以是相对定位，相对于前一个点，控制点的坐标是（100+150， 350-300），终点的坐标是（100+300,350+0）
	" stroke="green" stroke-width="3" fill="none" />
  
  <!-- 三个点的设置 -->
  <g stroke="black" stroke-width="3" fill="yellow">
    <circle id="pointA" cx="100" cy="350" r="10" />
    <circle id="pointB" cx="250" cy="50" r="5" />
    <circle id="pointC" cx="400" cy="350" r="10" />
  </g>
  <!-- A、B、C的设置 -->
  <g font-size="30" fill="black" stroke="none" text-anchor="middle">
    <text x="125" y="335" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="370" y="335" dx="30">C</text>
  </g>
</svg>

画一道桥
A命令的使用语法：<path d=“M x y A rx ry x-axis-rotation large-arc sweep x y”> </path>

<svg  height="210"  width="500">
  <path d="M 0 100  
  	L 100 100 
 	A 100 100 0 1 1 300 100  
 	// A后边的100 100分别表示椭圆弧的X轴和Y轴的半径； 
 	// 后边的0表示相对于X轴旋转的度数；
 	// 后边的1表示弧线大于180度，值为0的时候表示弧线小于180度，只有1和0两个值；
 	// 后边的另外一个1表示弧线顺时针旋转，如果值是0则表示弧线逆时针旋转，也是只有1和0两个值；
 	// 最后的300 100表示的终点的位置坐标
  	L 400 100 
" stroke="black" stroke-width="1" fill="none"></path>
</svg>

目前就这些，后期再补充