一、矩形 rect

1、属性

矩形元素是 rect,基本的属性列表如下:

属性名描述
xx 轴位置
yy 轴位置
rxx 轴圆角半径
ryy 轴圆角半径
fill填充颜色
width宽度
height高度
stroke边框颜色
stroke-width边框宽度

2、示例

示例代码如下:

<svg  width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <rect x="10" y="10" width="50" height="50" fill="red" stroke="#000000"  rx="50" ry="50"  stroke-width="1"/>

  <rect x="60" y="60" width="50" height="50" fill="#cccccc" stroke="#000000" stroke-width="1"/>
  
  <rect x="120" y="120" width="50" height="50" fill="#000000" rx="20" ry="20"/> 
</svg>

3、效果

1.jpg

二、圆形 circle

1、属性

同样支持 fillstrokestroke-width 属性,借助 fill="transparent" 可以实现透明背景色。

属性名描述
r半径
rx圆心 x 轴位置
ry圆心 y 轴位置

2、代码

<svg  width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <circle cx="20" cy="20" r="20" fill="transparent" stroke="#cccccc" stroke-width="1"/>
  <circle cx="50" cy="50" r="20" fill="red" />
</svg>

3、效果

2.jpg

三、椭圆 ellipse

本质上可以使用椭圆来实现圆形,所以其实 circle 有点多余,像 canvas 就没有 circle。

1、属性

同样支持 fill / stroke / stroke-width

属性名描述
rxx 轴半径
ryy 轴半径
cx圆心 x 轴位置
cy圆心 y 轴位置

2、示例

<svg  width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <ellipse cx="50" cy="50" rx="30" ry="40" fill="transparent" stroke="#cccccc" stroke-width="1"/>
  <ellipse cx="100" cy="100" rx="30" ry="40" fill="red" />
</svg>

3、效果

3.jpg

四、线条 line

其实基于 一条 line 就能够实现矩形,而多个 line 的组合便能组合出多种图形。

1、属性

支持 stroke / stroke-width 属性

属性名描述
x1起点 x 轴坐标
y1起点 y 轴坐标
x2终点 x 轴坐标
y2终点 y 轴坐标

2、示例

<svg  width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <line x1="10" y1="10" x2="30" y2="30" stroke="#000000" stroke-width="2"/>
  <line x1="40" y1="20"  x2="50" y2="30" stroke="red"  stroke-width="20"/>
</svg>

3、效果

4.jpg

五、折线 polyline

基于 polyline 可以实现 line (下面示例有)

1、属性

同样支持 fill / stroke / stroke-width

属性名描述
points点集数列

MDN 对于点集数列的描述如下:

点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字,一个是x坐标,一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样:“0 0, 1 1, 2 2”。

实际上点集数列就是多个坐标,最后将多个坐标连起来。

在实践过程中发现,需要通过 fill=transparent 过滤掉背景,在 chrome 下默认有一个黑色的背景。

2、示例

<svg  width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <polyline points="0 0, 2 2, 10 30, 50 60, 80 60" fill="transparent" stroke="red" stroke-width="3"/>
  <polyline points="30 30,80 80" stroke="#000000" stroke-width="3"/>
</svg>

3、效果

5.jpg

6.jpg

六、多边形 polyon

polyon 能够实现 矩形等形状。

1、属性

属性名描述
points点集数列

MDN 对于点集数列的描述如下:

点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含2个数字,一个是x坐标,一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样:“0 0, 1 1, 2 2”。路径绘制完后闭合图形,所以最终的直线将从位置(2,2)连接到位置(0,0)。

2、示例

下面代码实现一个三角形

<svg  width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <polygon points="10 0,0 10,20 10" fill="red"  stroke="#000000" stroke-width="1" />
</svg>

3、效果

7.jpg

七、路径 path

path 是用的最多的形状了。

1、属性

属性名描述
d点集数列及描述

MDN 对于 d 的描述如下:

一个点集数列以及其它关于如何绘制路径的信息。

关于 path,可以查看下面的文档了解更多的内容:

2、示例

<svg  width="300" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg" >
  <path d="M 20 30 Q 40 25, 50 80 T 190 230"/>
</svg>

3、效果

8.jpg