前言
SVG 指可缩放矢量图形,是用于描述二维矢量图形的一种图形格式。SVG 中预定了七种形状元素,分别是:
- 矩形
- 圆形
- 椭圆形
- 线段
- 折线
- 多边形
- 路径
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