【SVG】SVG快速入门

前言

SVG 指可缩放矢量图形，是用于描述二维矢量图形的一种图形格式。SVG 中预定了七种形状元素，分别是：

1. 矩形
2. 圆形
3. 椭圆形
4. 线段
5. 折线
6. 多边形
7. 路径

---

1、矩形和圆角矩形

矩形的参数共有六个：

• x：矩形左上角的 x 坐标
• y：矩形左上角的 y 坐标
• width：矩形的宽度
• height：矩形的高度
• rx：对于圆角矩形，指定椭圆在 x 方向的半径
• ry：对于圆角矩形，指定椭圆在 y 方向的半径

下面分别绘制一个直角矩形和圆角矩形：

<svg width="500" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="20" width="200" height="100" style="fill:steelblue; stroke:blue; stroke-width:4; opacity:0.5;" />
    <rect x="250" y="20" rx="20" ry="30" width="200" height="100" style="fill:yellow; stroke:black; stroke-width:4; opacity:0.5;" />
</svg>

---

2、圆形和椭圆形

圆形的参数共有五个：

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

下面分别绘制一个圆形和椭圆形：

<svg width="500" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle cx="150" cy="150" r="80" style="fill:yellow; stroke:black; stroke-width:4" />
    <ellipse cx="350" cy="150" rx="110" ry="80" style="fill:#33ff33; stroke:blue; stroke-width:4;" />
</svg>

---

3、线段

线段的参数是起点和终点的坐标。

• x1：起点的 x 坐标
• y1：起点的 y 坐标
• x2：终点的 x 坐标
• y2：终点的 y 坐标

下面绘制一个线段：

<svg width="500" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line x1="20" y1="20" x2="300" y2="100" style="stroke:black; stroke-width:4;" />
</svg>

---

4、多边形和折线

多边形和折线的参数是一样的，都只有一个 points 参数，这个参数的值是一系列点坐标。不同之处是多边形会将终点和起点连接起来，而折线不连接。下面的代码分别绘制多边形和折线：

<svg width="500" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polygon points="100,20 20,90 60,160 140,160 180,90" style="fill:lawngre