svg-基本形状

1.矩形

x：矩形左上角的x位置
y：矩形左上角的y位置
width：矩形的宽度
height：矩形的高度
rx：圆角的x方位的半径
ry：圆角的y方位的半径

  <rect x="10" y="10" rx="50" ry="10" width="100" height="100" stroke="black" fill="transparent" stroke-width="5"/>

rx和ry是设置用来圆角的，默认为0；

2.圆形

<circle cx="25" cy="75" r="20"/>

r：圆的半径
cx：圆心的x位置
cy：圆心的y位置

3.椭圆形

<ellipse cx="200" cy="100" rx="100" ry="50" stroke="blue" stroke-width="2" fill="transparent"/>

rx：椭圆的x半径
ry：椭圆的y半径
cx：椭圆中心的x位置
cy：椭圆中心的y位置

4.直线

<line x1="10" y1="10" x2="350" y2="50" stroke="blue" stroke-width="2"/>

x1：起点的x位置
y1：起点的y位置
x2：终点的x位置
y2：终点的y位置

5.折线

<polyline points="60 110, 80 125, 105 160, 70 175, 125 190, 100 245" stroke="blue" stroke-width="2" fill="transparent"/>

6.多边形

 <polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180" stroke="blue" stroke-width="2" fill="transparent"/>

7.路径

path可能是SVG中最常见的形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。

<path d="M 20 230 Q 40 205, 50 230 T 90230"/>

8. path详解

8.1 用path画矩形

 <path d="M 100 100 L 200 100 V 200 H 100 V 100" stroke="blue" stroke-width="2" fill="transparent"/>

或

<path d="M 100 100 L 200 100 V 200 H 100 Z" stroke="blue" stroke-width="2" fill="transparent"/>

或

<path d="M 100 100 l 100 0 v 100 h -100 Z" stroke="blue" stroke-width="2" fill="transparent"/>

M：移动到某个点
L：画直线到某个点
V：垂直画直线到某个点（只需要写纵坐标）
H：水平画直线到某个点（只需要写横坐标）
Z：从当前点画一条直线到路径的起点
注意大写用的好似绝对坐标，小写用的是相对坐标。

8.2 用path绘制曲线

1.三次贝塞尔曲线（C S） 二个控制点

<svg width="700px" height="700px" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid black">
  <path d="M 20 300 C 100 220, 200 200, 300 300 S 450 380,500 300" stroke="black" fill="transparent"/>
  <!-- 1.起点 -->
  <circle cx="20" cy="300" r="2" fill="red"/>
  <!-- 1.第一个控制点 -->
  <circle cx="100" cy="220" r="2" fill="red"/>
  <!-- 1.第二个控制点 -->
  <circle cx="200" cy="200" r="2" fill="red"/>
  <!-- 1.终点 -->
  <circle cx="300" cy="300" r="2" fill="red"/>

  <!-- 2.第一个控制点 -->
  <circle cx="400" cy="400" r="2" fill="red"/>
  <!-- 2.第二个控制点 -->
  <circle cx="450" cy="380" r="2" fill="red"/>
  <!-- 2.终点 -->
  <circle cx="500" cy="300" r="2" fill="red"/>

  <path d="M 20 300 L 100 220" stroke="red" stroke-width="2" />
  <path d="M 200 200 L 300 300" stroke="red" stroke-width="2" />
  <path d="M 300 300 L 400 400" stroke="blue" stroke-width="2" />
  <path d="M 450 380 L 500 300" stroke="blue" stroke-width="2" />
</svg>

M: 起点
C： 贝塞尔曲线，第一个控制点+第二个控制点+中点
S：用来创建与前面一样的贝塞尔曲线，但是，如果S命令跟在一个C或S命令后面，则它的第一个控制点会被假设成**前一个命令曲线的第二个控制点的中心对称点。**如果S命令单独使用，前面没有C或S命令，那当前点将作为第一个控制点。

2.二次贝塞尔曲线（Q T）一个控制点

<svg width="700px" height="700px" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid black">
  <path d="M 0 300 Q 100 600, 200 300 T 400 300" stroke="black" fill="transparent"/>
  <!-- 1.起点 -->
  <circle cx="0" cy="300" r="2" fill="red"/>
  <!-- 1.第一个控制点 -->
  <circle cx="100" cy="600" r="2" fill="red"/>
  <!-- 1.终点 -->
  <circle cx="200" cy="300" r="2" fill="red"/>

  <!-- 2.第一个控制点 -->
  <circle cx="300" cy="0" r="2" fill="red"/>
  <!-- 2.终点 -->
  <circle cx="400" cy="300" r="2" fill="red"/>

  <path d="M 0 300 L 100 600" stroke="red" stroke-width="2" />
  <path d="M 100 600 L 200 300" stroke="red" stroke-width="2" />
  <path d="M 200 300 L 300 0" stroke="blue" stroke-width="2" />
  <path d="M 300 0 L 400 300" stroke="blue" stroke-width="2" />
</svg>

8.3 用path绘制弧形（圆形和椭圆形弧）

A rx ry x-axis-rotation large-arc-flag sweep-flag x y  //x y绝对
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy  //dx dy相对

1. rx ry 是椭圆的两个半轴的长度。
2. x-axis-rotation 是椭圆相对于坐标系的旋转角度，角度数而非弧度数。
3. large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。
4. sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。
5. x y 是圆弧终点的坐标。
   
   举例：
   画之前计算好坐标

<?xml version="1.0" standalone="no"?>
<svg width="700px" height="700px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M 300 280
            A 20 40 -30 1 0 282.5 290
            A 20 40 -90 1 0 282.5 310
            A 20 40 -150 1 0 300 320
            A 20 40 -210 1 0 317.5 310
            A 20 40 -270 1 0 317.5 290
            A 20 40 -330 1 0 300 280"
            fill="pink" stroke="red" stroke-width="1" />
    <circle cx="300" cy="300" r="20" fill="green" stroke="red" stroke-width="1" />
</svg>