SVG学习笔记五

基本形状

SVG 有一些预定义的形状元素，可被开发者使用和操作：

1.矩形

标签，使用x,y,width,height表示一个矩形

• x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
• y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
• rect 元素的 width 和 height 属性可定义矩形的高度和宽度

特性	说明
fill	填充颜色
fill-opacity	填充不透明度
stroke	边框颜色
stroke-width	边框宽度，边框是骑在矩形边界上的，一半在矩形外，一半在矩形内
rx/ry	圆角矩形，最大值为矩形宽/高的一半，如果只指定了一个，则认为两个都为相同的值

2.圆形

标签可用来创建一个圆。

• cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)。
• r 属性定义圆的半径。

3.椭圆

标签可用来创建椭圆。椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的。

• cx 属性定义圆点的 x 坐标
• cy 属性定义圆点的 y 坐标
• rx 属性定义水平半径
• ry 属性定义垂直半径

特性	说明
fill	填充颜色
fill-opacity	填充不透明度
stroke	边框颜色
stroke-width	边框宽度，边框是骑在圆的边界上的，一半在圆/椭圆外，一半在圆/椭圆内

4.线

标签用来创建线条。

• x1 属性在 x 轴定义线条的开始
• y1 属性在 y 轴定义线条的开始
• x2 属性在 x 轴定义线条的结束
• y2 属性在 y 轴定义线条的结束

特性	说明
stroke-width	笔画宽度，坐标网格线位于笔画的正中间，可以使用css的shape-rendering值来控制反锯齿特性
stroke	笔画颜色
stroke-opacity	线条的不透明度
stroke-dasharray	虚线，由一系列数字组成，数字个数为偶数(负责会自动重复一遍使其为偶数),表示线长-间隙-线长-间隙...

5.折线

标签用来创建仅包含直线的形状。

• 使用points属性指定一系列点，不自动封闭图形

6.多边形

标签用来创建含有不少于三个边的图形。

• 由points属性指定的一系列坐标点界定，会自动封闭

特性	说明
fill	填充颜色
fill-opacity	填充不透明度
stroke	边框颜色
stroke-width	边框宽度
fill-rule	填充规则，如果多边形的边有交叉时，需要指定，可以取nozero(默认)和evenodd两个值。

fill-rule值为nonzero时的原理:判断一个点是在多边形内部还是外部时，从这个点画一条到无穷远的射线，然后数这个线和多边形的边有多少次交叉。如果交叉的边线是从右往左画，则总数加1，如果是从左往右则总数减1.如果最后总数为0则认为改点在图形外部，否则在内部。

fill-rule值为evenodd时只数射线与多边形边的交叉次数，如果为奇数则认为在多边形内部，否则认为在多边形外部。

7.路径

标签用来定义路径。可以通过制定一系列相互连接的线、弧、曲线来绘制任意形状的轮廓，这些轮廓也可以填充或者绘制轮廓线，也可以用来定义裁剪区域或蒙版。

命令	参数	说明
M m	x y	移动画笔到制定坐标（moveto）
L l	x y	绘制一条到给定坐标的线（lineto）
H h	x	绘制一条到给定x坐标的横线（horizontal lineto）
V v	y	绘制一条到给定y坐标的垂线（vertical lineto）
A a	rx ry x-axis-rotation large-arc sweep x y	圆弧曲线命令有7个参数，依次表示x方向半径、y方向半径、旋转角度、大圆标识、顺逆时针标识、目标点x、目标点y。大圆标识和顺逆时针以0和1表示。0表示小圆、逆时针（elliptical Arc）
Q q	x1 y1 x y	绘制一条从当前点到x,y控制点为x1,y1的二次贝塞尔曲线（quadratic Belzier curve）
T t	x y	绘制一条从当前点到x,y的光滑二次贝塞尔曲线，控制点为前一个Q命令的控制点的中心对称点，如果没有前一条则已当前点为控制点。（smooth quadratic Belzier curveto）
C c	x1 y1 x2 y2 x y	绘制一条从当前点到x,y控制点为x1,y1 x2,y2的三次贝塞尔曲线（curveto）
S s	x2 y2 x y	绘制一条从当前点到x,y的光滑三次贝塞尔曲线。第一个控制点为前一个C命令的第二个控制点的中心对称点，如果没有前一条曲线，则第一个控制点为当前的点。（smooth curveto）
Z z		(closepath)

注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

8.marker元素

marker元素用来在path上添加一个标记，比如箭头之类的。

• 首先需要定义好marker元素，然后在path中引用，一个marker标记是一个独立的图形，有自己的私有坐标。

/***css***/
path{
    marker:url(#marker_id);
}

marker属性	说明
markerWidth	marker标记的宽度
markerHeight	marker标记的高度
refX refY	指定marker中的哪个坐标与路径的开始坐标对齐
orient	自动旋转匹配路径的方向，需要设置为auto
markerUnits	这个属性决定标记的坐标系统是否需要根据path的笔画宽度调整，如果设置为strokeWidth，则标记会自动调整大小。如果设置为useSpaceOnUse，则不会自动调整标记的大小。
viewBox preserveAspectRatio	设置标记的显示效果，比如可以将标记的(0,0)设置在标记网格中心

注释：如果id为marker_id的标记中也有path元素，则会出现自身无限引用自身的情况，因此需要说明marker中的path元素不需要添加标记