SVG 入门指北（一）：简介、特点、浏览器支持情况、数值单位
SVG 入门指北（二）：理解画布、视窗、视野
SVG 入门指北（三）：矩形、圆形、椭圆
SVG 入门指北（四）：线条、多边形、多线条、文本、路径
SVG 矩形 - rect
| 参数 | 说明 |
|---|---|
| width | 矩形宽度 |
| height | 矩形高度 |
| x | 矩形左侧位置 |
| y | 矩形顶部位置 |
| opacity | 矩形整体不透明度（0 ～ 1） |
| fill | 矩形的填充色 |
| fill-opacity | 填充色不透明度（0 ～ 1） |
| stroke | 边框颜色 |
| stroke-width | 矩形边框宽度 |
| stroke-opacity | 边框颜色不透明度（0 ～ 1） |
| rx | 矩形 x 轴方向圆角半径长度(最大值为宽度一半) |
| ry | 矩形 y 轴方向圆角半径长度(长度相同可简写为其中任意一个) |
<svg width="100" height="100">
<rect
width="80"
height="80"
x='10'
y="10"
fill="yellow"
fill-opacity=".4"
stroke-width="5"
stroke="green"
stroke-opacity=".8"
rx="20"
ry="10"
/>
</svg>
SVG 圆形 - circle
| 参数 | 说明 |
|---|---|
| cx | 圆心 x 轴坐标，默认 0 |
| cy | 圆心 y 轴坐标，默认 0 |
| r | 圆的半径 |
| opacity | 圆形整体不透明度（0 ～ 1） |
| fill | 圆形的填充色 |
| fill-opacity | 填充色不透明度（0 ～ 1） |
| stroke | 边框颜色 |
| stroke-width | 矩形边框宽度 |
| stroke-opacity | 边框颜色不透明度（0 ～ 1） |
<svg width="100" height="100">
<circle
cx='50'
cy="50"
r="40"
fill="yellow"
fill-opacity=".4"
stroke-width="5"
stroke="green"
stroke-opacity=".8"
/>
</svg>
SVG 椭圆 - ellipse
| 参数 | 说明 |
|---|---|
| cx | 圆心 x 轴坐标，默认 0 |
| cy | 圆心 y 轴坐标，默认 0 |
| rx | 圆的水平半径 |
| ry | 圆的垂直半径 |
| opacity | 圆形整体不透明度（0 ～ 1） |
| fill | 圆形的填充色 |
| fill-opacity | 填充色不透明度（0 ～ 1） |
| stroke | 边框颜色 |
| stroke-width | 矩形边框宽度 |
| stroke-opacity | 边框颜色不透明度（0 ～ 1） |
<svg width="100" height="100">
<ellipse
cx='50'
cy="50"
rx="40"
ry="20"
fill="yellow"
stroke-width="5"
stroke="green"
opacity=".7" />
</svg>
