基本图形的绘制

1.矩形 rect

<svg width="200" height="150">
    <rect width="100" height="50" x="25" y="25" rx="5"></rect>
</svg>

• width：矩形的宽度
• height：矩形的高度
• x：矩形左上角X坐标
• y：矩形左上角Y坐标
• rx：x轴的圆角半径
• ry：y轴的圆角半径

2.圆形 circle

<svg>
    <circle cx="50" cy="50" r="40"/>
</svg>

• cx：圆心的横坐标
• cy：圆心的纵坐标
• r：圆的半径

3.椭圆 ellipse

<svg width="500" height="140">
	<ellipse cx="200" cy="80" rx="100" ry="50" />
</svg>

• cx：定义椭圆中心的x坐标。
• cy：定义椭圆中心的y坐标。
• rx：定义水平半径。
• ry：定义垂直半径。

4.线段 line

<svg>
    <line x1="10" y1="10" x2="100" y2="100" stroke="red"/>
</svg>

• x1：线段的起点X坐标
• y1：线段的起点Y坐标
• x2：线段的终点X坐标
• y2：线段的终点X坐标

5.多边形 polygon

<svg>
    <polygon points="200,20 100,50 160,120"></polygon>
</svg>

• points：多边形端点的坐标，每个坐标使用x,y的格式定义，多个坐标使用空格隔开

6.多线条 polyline

<svg width="500" height="200">
    <polyline points="20,20 40,25 60,40 80,120  120,140 200,180"  stroke="black" fill="none"></polyline>
</svg>

• points：线条端点坐标，每个坐标使用x,y的格式定义，多个坐标使用空格隔开
• stroke：线条的颜色
• fill：置顶是否填充颜色

若fill不为none，则是如下效果

7.文本 text

<svg width="300" height="50">
    <text x="0" y="30" fill="red" font-size="30" text-anchor='start'>
        I love SVG!!!
    </text>
</svg>

• x：文本左下角X坐标

• y：文本左下角Y坐标

• fill：文本的填充颜色

• font-size：文本的字体大小

• text-anchor：默认start

  • start：左端对齐坐标
  • middle：文本中间对齐坐标
  • end：文本右边对齐

text标签可包含多个tspan标签

<svg width="300" height="90">
    <text x="0" y="15" fill="red"  > 
         外面的字
         <tspan x="10" y="45"> 里面的字1 </tspan>
         <tspan x="10" y="70"> 里面的字2 </tspan>
    </text>
</svg>

文本也可以添加超链接

使用a标签要在svg标签是添加命名空间 xmlns:xlink="http://www.w3.org/1999/xlink"

<svg width="200" height="30" xmlns:xlink="http://www.w3.org/1999/xlink">
    <a xlink:href="https://xarzhi.github.io/" target="_blank">
        <text x="10" y="15" fill="red"> love!!</text>
    </a>
</svg>

• xlink:href：超链接的地址
• target：指定新窗口的打开方式

8.路径 path

路径可以绘制任何图形，主要依靠d属性里的指令代码

<svg width="400" height="210">
    <path d="M150 0 L75 200 L255 200"></path>
</svg>

• d：绘制路径的命令，小写 m/l/h/v 表示相对坐标（相对于上一个点），大写是绝对坐标（相对于画布原点）。

8.1 M

MoveTo：抬笔移动到，例如M 10 30移动到坐标(10,30)的位置，但是只是移动，不会绘制线段

<svg width="400" height="210">
   <path d="M150 0"></path>
</svg>

8.2 L

LineTo：绘制线段到，例如L 80 30，从当前位置到(80,30)的位置绘制一条线段，添加fill="none"防止自动闭合

<svg width="400" height="120">
    <path d="M150 0 L150 100 L200 100 L200 50 L300 50" fill="none" stroke='black'></path>
</svg>

8.3 H

绘制水平线

例如H 200，从当前位置到x=200的位置绘制的水平线

<svg width="400" height="50">
    <path d="M150 25 H 200" stroke='black'></path>
</svg>

如果是负数，例如H -200，从当前位置到x=-200的位置绘制的水平线

<svg width="400" height="50">
    <path d="M150 25 H -200" stroke='black'></path>
</svg>

8.4 V

绘制垂直线

例如V 200，从当前位置到y=200的位置绘制的水平线

<svg width="400" height="50">
    <path d="M150 25 V 200" stroke='black'></path>
</svg>

如果是负数，例如V -200，从当前位置到y=-200的位置绘制的水平线

<svg width="400" height="50">
    <path d="M150 25 V -200" stroke='black'></path>
</svg>

8.5 Z

close：闭合路径，将最后一个点和起点相连，添加fill="none"以防止自动填充

<svg width="400" height="210">
    <path d="M150 0 L75 200 L255 200 Z" fill="none" stroke='black'></path>
</svg>

8.6 Q

二次贝塞尔曲线，语法格式为：Q 控制点X 控制点Y 终点X 终点Y

<svg width="400" height="210">
    <path d="M 10 80 Q 95 10 180 80" stroke="red" fill="none"/>
</svg>

8.7 C

二次贝塞尔曲线，语法格式为：Q 控制点1X 控制点1Y 控制点2X 控制点2Y 终点X 终点Y

<svg width="400" height="210">
    <path d="M 10 80 C 40 10, 150 10, 180 80" fill="none" stroke="blue"/>
</svg>

8.8 A

椭圆弧线，语法格式如下

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

• rx：椭圆水平半径。
• ry：椭圆垂直半径。
• x-axis-rotation：椭圆整体旋转的度数，0=正着，90=横着躺
• large-arc-flag：是标记绘制大弧(1)还是小弧(0)部分。
• sweep-flag：是标记向顺时针(1)还是逆时针(0)方向绘制。
• x：圆弧终点的X坐标。
• y：圆弧终点的Y坐标。

large-arc-flag要依据当前点和圆弧终点的坐标，比如说起点和终点分别是如下两个点(100, 100)和(200， 100)

那么依据这两个点，就可以绘制两个椭圆，分别如下

这两个椭圆中，蓝色的叫大弧，红色的是小弧large-arc-flag为1会绘制大弧，为0就绘制小弧，sweep-flag为1顺时针画，为0逆时针画

还是这两个点，如果绘制大弧顺时针

大弧逆时针

如果绘制小弧顺时针

小弧逆时针