第一节 SVG 基本图形

line

直线

line

circle

基本属性cx与circle表示的是圆心的坐标，r是半径

circle

ellipse

椭圆

ellipse

rect

画一个矩形或者一个长方形，还可以画圆角
x与y属性控制在指定svg宽高的范围内矩形左上角的位置
width与height控制矩形的长宽
rx控制水平方向圆角
ry控制垂直方向圆角

image.png

polygon

多边形是由直线组成，其形状是"封闭"的（所有的线条 连接起来）。
polygon来自希腊。 "Poly" 意味 "many" ， "gon" 意味 "angle"。
fill-rule属性：
属性用于指定使用哪一种算法去判断画布上的某区域是否属于该图形“内部” （内部区域将被填充）。对一个简单的无交叉的路径，哪块区域是“内部” 是很直观清除的。但是，对一个复杂的路径，比如自相交或者一个子路径包围另一个子路径，“内部”的理解就不那么明确了。

fill-rule 属性提供两种选项用于指定如何判断图形的“内部”:
nonzero
字面意思是“非零”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点情况。从0开始计数，路径从左向右(顺时针)穿过射线则计数加1，从右向左(逆时针)穿过射线则计数减1。得出计数结果后，如果结果是0，则认为点在图形外部，否则认为在内部。下图演示了nonzero规则:

nonzero

evenodd

字面意思是“奇偶”。按该规则，要判断一个点是否在图形内，从该点作任意方向的一条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。下图演示了evenodd 规则:

evenodd

nonzero

evenodd

image.png

Demo by Joni Trythall

image.png

Demo by Joni Trythall
下图中的箭头表示绘制路径的方向:

image.png

Demo by Joni Trythall

image.png

image.png

image.png

给定偶数规则的特定算法，与非零不同，相关内部形状的绘图方向无关紧要，因为我们只是在路径穿过线时计算路径
Demo by Joni Trythall

polyline

曲线

polyline

text

(x,y)用于指定文字起始位置。准确的说，x指定文字最左侧坐标位置，y指定文字baseline所处y轴位置。
fill的默认为black，stroke默认为none。如果设置了stroke，字的边缘会再“描一层边”。如果设置了stroke并将fill设为none，呈现为空心字。

image.png

默认从起始位置(x,y)开始展示。但由于在svg中无法事先知道的长度，所以无法仅通过改变(x,y)让的中轴或结束位置位于指定位置。
但svg提供了一种更简单直接的方法实现这些对齐方式。
text-anchor属性可以改变(x,y)作为起始坐标的定义。
text-anchor="start"时，(x,y)为的起始坐标。
text-anchor="middle"时，(x,y)为的中轴坐标。
text-anchor="end"时，(x,y)为的结束坐标。

image.png

如果要实现在一整段文字中，让部分文字呈现出不同的样式，只用是不现实的，在不知道一个在哪儿结束的情况下，无法让另一个紧接在其后面。
允许被嵌入在内部来实现以上场景。
除了拥有的属性外，还有另外两个属性dx, dy
dx,dy)可以将内的文字，以其初始位置为起点(0,0)，偏移(dx,dy)
(x,y)是将内的文字定位到其坐标系的(x,y)位置

image.png

image.png

"shaken"一共六个字符，dx,dy,rotate分别各有六个数值，空格或逗号隔开，每个数值对相作用于应次序的字母。rotate可以对字符做旋转。
如果dx（或者dy,rotate）参数个数小于内的字符个数，最后一个dx(dy,rotate)参数值将作用于多出的字符。

image.png

超出长度部分的文字将被隐藏。

默认的，的起始位置为的起始位置。
元素还有一个startOffset属性，可以调整起始位置。startOffset为百分数时，起始位置 = startOffset * 总长度。startOffset为具体数字时，起始位置 = startOffset + 的起始位置。
利用startOffset和text-anchor，可以实现文字居中摆放。

image.png

path

image.png

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 Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径
大写表示绝对定位，小写表示相对定位

image.png

image.png

dasharray 顾名思义就是线段的数组，他的参数可以是一个数组,单数值代表实线的长度，双数值代表虚线的长度
下面每个方格10px，总长200px
stroke-dasharray: 0;
此时stroke-dasharray不起作用，注:当他的参数<=0时该属性将失效

image.png

stroke-dasharray: 20;

image.png

实线的长度确实是20px，为什么会有虚线也是20呢，这里官方文档给出的解释是：If the list has an odd number of values, then it is repeated to yield an even number of values. 也就是说如果参数个数是单数是默认会复制一份参数
demo来自

stroke-dashoffset：相对于绘制的起点偏移的量，正值(向右或者顺时针偏移)，负值(向左或者逆时针)，必须配合stroke-dasharray使用