line

直线

<?xml version="1.0"?>
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
</svg>

line

circle

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

<?xml version="1.0"?>
<svg width="100" height="100" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" style="background-color: #333333">
    <circle cx="50" cy="50" r="25" fill="#868666"/>
</svg>

circle

ellipse

椭圆

<?xml version="1.0"?>
<svg width="100" height="100" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" style="background-color: #333333">
    <ellipse cx="50" cy="50" rx="40" ry="20" fill="#868666"  />
</svg>

ellipse

rect

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

<?xml version="1.0"?>
<svg width="100" height="100" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" style="background-color: #333333">
    <rect x="10" y="35" width="30" height="30" fill="#868666"/>
    <rect x="60" y="35" width="30" height="30" rx="5" ry="5" fill="#868666"/>
</svg>

image.png

polygon

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

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

nonzero

evenodd

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

evenodd

<svg height="210" width="500">
    <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:3;fill-rule:nonzero;" />
</svg>

nonzero

<svg height="210" width="500">
    <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:3;fill-rule:evenodd;" />
</svg>

evenodd

<?xml version="1.0"?>
<svg width="250px" height="250px" viewBox="0 0 250 250">
    <desc>Yellow star with intersecting paths to demonstrate nonzero value.</desc>
    <polygon fill="#F9F38C" fill-rule="nonzero" stroke="#E5D50C" stroke-width="5" stroke-linejoin="round" points="47.773,241.534 123.868,8.466 200.427,241.534 7.784,98.208 242.216,98.208 " />
</svg>
<svg width="250px" height="250px" viewBox="0 0 250 250">
    <desc>Orange sun with enclosed path to demonstrate nonzero value.</desc>
    <path fill="#F4CF84" fill-rule="nonzero" stroke="#D07735" stroke-width="5" d="M124.999,202.856
    c-42.93,0-77.855-34.928-77.855-77.858s34.925-77.855,77.855-77.855s77.858,34.925,77.858,77.855S167.929,202.856,124.999,202.856z
    M125.003,245.385c-7.61,0-13.025-6.921-17.802-13.03c-2.79-3.559-6.259-8.002-8.654-8.638c-0.318-0.085-0.71-0.134-1.159-0.134 c-2.873,0-7.1,1.698-11.188,3.335c-4.929,1.973-10.029,4.021-14.774,4.021c-2.486,0-4.718-0.563-6.633-1.677 c-6.451-3.733-7.618-11.959-8.742-19.919c-0.646-4.571-1.45-10.261-3.292-12.096c-1.84-1.845-7.524-2.646-12.093-3.298 c-7.96-1.119-16.192-2.286-19.927-8.739c-3.682-6.358-0.614-14.005,2.35-21.404c1.829-4.563,3.904-9.735,3.201-12.352 c-0.638-2.392-5.073-5.861-8.64-8.648C11.539,138.025,4.618,132.612,4.618,125c0-7.61,6.921-13.025,13.027-17.802
    c3.567-2.79,8.002-6.259,8.64-8.651c0.702-2.614-1.375-7.789-3.201-12.349c-2.961-7.399-6.029-15.046-2.347-21.409 c3.733-6.451,11.962-7.618,19.924-8.742c4.569-0.646,10.253-1.45,12.096-3.292c1.84-1.84,2.646-7.524,3.29-12.093 c1.127-7.96,2.291-16.192,8.745-19.924c1.914-1.111,4.147-1.674,6.633-1.674c4.745,0,9.845,2.045,14.771,4.021 c4.085,1.639,8.312,3.335,11.188,3.335c0.446,0,0.836-0.045,1.161-0.131c2.392-0.641,5.861-5.079,8.654-8.643
    c4.782-6.109,10.194-13.03,17.804-13.03c7.612,0,13.025,6.921,17.804,13.027c2.782,3.565,6.259,8.002,8.654,8.643 c0.323,0.085,0.71,0.131,1.161,0.131c2.876,0,7.094-1.696,11.185-3.332c4.932-1.976,10.029-4.021,14.779-4.021 c2.478,0,4.715,0.563,6.627,1.671c6.448,3.733,7.618,11.962,8.739,19.927c0.646,4.569,1.453,10.253,3.292,12.093 c1.84,1.84,7.524,2.646,12.096,3.292c7.96,1.127,16.189,2.291,19.919,8.745c3.687,6.36,0.619,14.007-2.344,21.404
    c-1.824,4.563-3.898,9.735-3.201,12.347c0.641,2.395,5.079,5.864,8.643,8.657c6.104,4.774,13.025,10.189,13.025,17.799 c0,7.612-6.921,13.025-13.03,17.804c-3.559,2.788-8.002,6.264-8.638,8.654c-0.702,2.614,1.375,7.783,3.201,12.347 c2.964,7.399,6.032,15.046,2.344,21.409c-3.733,6.448-11.959,7.618-19.924,8.739c-4.566,0.646-10.256,1.453-12.09,3.292 c-1.845,1.84-2.646,7.524-3.298,12.096c-1.119,7.96-2.291,16.189-8.745,19.919c-1.909,1.113-4.147,1.677-6.627,1.677 c-4.745,0-9.839-2.048-14.768-4.021c-4.091-1.637-8.315-3.335-11.19-3.335c-0.446,0-0.836,0.048-1.161,0.134 c-2.392,0.635-5.861,5.073-8.648,8.638C138.027,238.464,132.615,245.385,125.003,245.385z" />
</svg>

image.png
Demo by Joni Trythall

<?xml version="1.0"?>
<svg width="240px" height="250px" viewBox="0 0 240 250">
    <desc>Green rectangle path with interior drawn clockwise to show nonzero rule.</desc>
    <path fill="#b4edb4" fill-rule="nonzero" stroke="#7DD37D" stroke-width="6" d="M231.645,236.645H8.355V13.355h223.29
     V236.645z M197.914,202.914H42.086V47.086h155.828V202.914z"/>
</svg>

<svg width="240px" height="250px" viewBox="0 0 240 250">
    <desc>Green rectangle path with interior drawn counterclockwise to show nonzero rule.</desc>
    <path fill="#b4edb4" fill-rule="nonzero" stroke="#7DD37D" stroke-width="6" d="M231.645,236.645H8.355V13.355h223.29
      V236.645z M42.694,202.306h154.611V47.694H42.694V202.306z"/>
</svg>

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

<svg width="250px" height="250px" viewBox="0 0 250 250">
    <desc>Yellow star with intersecting paths to demonstrate evenodd value.</desc>
    <polygon fill="#F9F38C" fill-rule="evenodd" stroke="#E5D50C" stroke-width="5" stroke-linejoin="round" points="47.773,241.534 123.868,8.466 200.427,241.534 7.784,98.208 242.216,98.208 " />
  </svg>
  <svg width="250px" height="250px" viewBox="0 0 250 250">
    <desc>Orange sun with enclosed path to demonstrate evenodd value.</desc>
    <path fill="#F4CF84" fill-rule="evenodd" stroke="#D07735" stroke-width="5" d="M124.999,202.856
    c-42.93,0-77.855-34.928-77.855-77.858s34.925-77.855,77.855-77.855s77.858,34.925,77.858,77.855S167.929,202.856,124.999,202.856z
    M125.003,245.385c-7.61,0-13.025-6.921-17.802-13.03c-2.79-3.559-6.259-8.002-8.654-8.638c-0.318-0.085-0.71-0.134-1.159-0.134 c-2.873,0-7.1,1.698-11.188,3.335c-4.929,1.973-10.029,4.021-14.774,4.021c-2.486,0-4.718-0.563-6.633-1.677 c-6.451-3.733-7.618-11.959-8.742-19.919c-0.646-4.571-1.45-10.261-3.292-12.096c-1.84-1.845-7.524-2.646-12.093-3.298 c-7.96-1.119-16.192-2.286-19.927-8.739c-3.682-6.358-0.614-14.005,2.35-21.404c1.829-4.563,3.904-9.735,3.201-12.352 c-0.638-2.392-5.073-5.861-8.64-8.648C11.539,138.025,4.618,132.612,4.618,125c0-7.61,6.921-13.025,13.027-17.802
    c3.567-2.79,8.002-6.259,8.64-8.651c0.702-2.614-1.375-7.789-3.201-12.349c-2.961-7.399-6.029-15.046-2.347-21.409 c3.733-6.451,11.962-7.618,19.924-8.742c4.569-0.646,10.253-1.45,12.096-3.292c1.84-1.84,2.646-7.524,3.29-12.093 c1.127-7.96,2.291-16.192,8.745-19.924c1.914-1.111,4.147-1.674,6.633-1.674c4.745,0,9.845,2.045,14.771,4.021 c4.085,1.639,8.312,3.335,11.188,3.335c0.446,0,0.836-0.045,1.161-0.131c2.392-0.641,5.861-5.079,8.654-8.643
    c4.782-6.109,10.194-13.03,17.804-13.03c7.612,0,13.025,6.921,17.804,13.027c2.782,3.565,6.259,8.002,8.654,8.643 c0.323,0.085,0.71,0.131,1.161,0.131c2.876,0,7.094-1.696,11.185-3.332c4.932-1.976,10.029-4.021,14.779-4.021 c2.478,0,4.715,0.563,6.627,1.671c6.448,3.733,7.618,11.962,8.739,19.927c0.646,4.569,1.453,10.253,3.292,12.093 c1.84,1.84,7.524,2.646,12.096,3.292c7.96,1.127,16.189,2.291,19.919,8.745c3.687,6.36,0.619,14.007-2.344,21.404
    c-1.824,4.563-3.898,9.735-3.201,12.347c0.641,2.395,5.079,5.864,8.643,8.657c6.104,4.774,13.025,10.189,13.025,17.799 c0,7.612-6.921,13.025-13.03,17.804c-3.559,2.788-8.002,6.264-8.638,8.654c-0.702,2.614,1.375,7.783,3.201,12.347 c2.964,7.399,6.032,15.046,2.344,21.409c-3.733,6.448-11.959,7.618-19.924,8.739c-4.566,0.646-10.256,1.453-12.09,3.292 c-1.845,1.84-2.646,7.524-3.298,12.096c-1.119,7.96-2.291,16.189-8.745,19.919c-1.909,1.113-4.147,1.677-6.627,1.677 c-4.745,0-9.839-2.048-14.768-4.021c-4.091-1.637-8.315-3.335-11.19-3.335c-0.446,0-0.836,0.048-1.161,0.134 c-2.392,0.635-5.861,5.073-8.648,8.638C138.027,238.464,132.615,245.385,125.003,245.385z" />
  </svg>

image.png

<svg width="240px" height="250px" viewBox="0 0 240 250">
   <desc>Green rectangle path with interior drawn clockwise to show evenodd rule.</desc>
   <path fill="#b4edb4" fill-rule="evenodd" stroke="#7DD37D" stroke-width="6" d="M231.645,236.645H8.355V13.355h223.29
    V236.645z M197.914,202.914H42.086V47.086h155.828V202.914z"/>
 </svg>

 <svg width="240px" height="250px" viewBox="0 0 240 250">
   <desc>Green rectangle path with interior drawn counterclockwise to show evenodd rule.</desc>
   <path fill="#b4edb4" fill-rule="evenodd" stroke="#7DD37D" stroke-width="6" d="M231.645,236.645H8.355V13.355h223.29
     V236.645z M42.694,202.306h154.611V47.694H42.694V202.306z"/>
 </svg>

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

polyline

曲线

<?xml version="1.0"?>
<svg width="150" height="200">
    <desc>First orange polyline demonstrating white fill on open path.</desc>
    <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="white" stroke="#D07735" stroke-width="6" />
</svg>
<svg width="150" height="200">
    <desc>Second orange polyline demonstrating yellow fill on open path.</desc>
    <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="#F9F38C" stroke="#D07735" stroke-width="6" />
</svg>

polyline

text

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

<?xml version="1.0"?>
<svg width="200" height="200" viewBox="0 0 120 100" xmlns="http://www.w3.org/2000/svg">
    <g id="coordinates" stroke="black" stroke-width="1">
        <path d="M10 0v90m0 -60h200m-200 30h200m-200 30h200"></path>
    </g>
    <g id="text">
        <text x="10" y="30">First Line</text>
        <text x="10" y="60" stroke="black">Second Line</text>
        <text x="10" y="90" stroke="blue" fill="none" stroke-width=".5">Third Line</text>
    </g>
</svg>

image.png

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

<?xml version="1.0"?>
<svg width="200" height="200" viewBox="0 0 220 200" xmlns="http://www.w3.org/2000/svg">
    <g style="font-size: 14pt;">
        <path d="M 100 10 100 100" style="stroke: gray; fill: none;"/>
        <text x="100" y="30" style="text-anchor: start">Start</text>
        <text x="100" y="60" style="text-anchor: middle">Middle</text>
        <text x="100" y="90" style="text-anchor: end">End</text>
    </g>
</svg>

image.png

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

<?xml version="1.0"?>
<svg width="200" height="200" viewBox="0 0 220 200" xmlns="http://www.w3.org/2000/svg">
    <g id="coordinates" fill="none" stroke="black" stroke-width="1">
        <path d="M10 0v30h200m-190 0v30h190m-180 0v30h180"></path>
    </g>
    <g id="text" font-size="2rem">
        <text x="10" y="30">first line
            <tspan x="20" y="60">second line</tspan>
            <tspan x="30" dy="30">third line</tspan>
        </text>
    </g>
</svg>

image.png

<?xml version="1.0"?>
<svg width="300" height="200" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="100" font-size="2rem">
        It’s
        <tspan dx="0 4 -3 5 -4 6" dy="0 -3 7 3 -2 -8"
               rotate="5 10 -5 -20 0 15">shaken</tspan>,
        not stirred.
    </text>
</svg>

image.png

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

<?xml version="1.0"?>
<svg width="300" height="200" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <path id="circle" d="M70 20a40 40 0 1 1 -1 0"></path>
    </defs>
    <text>
        <textPath xlink:href="#circle">
            Text following a circle.............
        </textPath>
    </text>
</svg>

image.png

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

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

<?xml version="1.0"?>
<svg width="300" height="200" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <path id="semi" d="M110 100a50 50 0 1 1 100 0"></path>
    </defs>
    <use xlink:href="#semi" stroke="grey" fill="none"></use>
    <text text-anchor="middle">
        <textPath xlink:href="#semi" startOffset="50%">
            Middle
        </textPath>
    </text>
</svg>

image.png

path

<svg width="5%" height="5%" viewBox="0,0,300,300">
    <path d="M0,0 L240,0 L240,240 L0,240 Z" fill="#fff" stroke="#000" stroke-width="10" transform="translate(5,5)"></path>
</svg>

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()：关闭路径
大写表示绝对定位，小写表示相对定位

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <g fill="none" stroke="black" stroke-width="6">
       <path stroke-linecap="butt" d="M5 20 l215 0" />
       <path stroke-linecap="round" d="M5 40 l215 0" />
       <path stroke-linecap="square" d="M5 60 l215 0" />
   </g>
</svg>

image.png

<svg width="100%" height="100%">
    <path d="M0,40 H240" stroke="#333" stroke-width="10" transform="translate(5,5)" stroke-dasharray="20" stroke-dashoffset="10"></path>
</svg>

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使用