千锋前端浠浠呀老师HTML+CSS教程，零基础web前端开发入门必看视频

利用svg标签绘制矩形、圆、椭圆

学习笔记：

1.矩形(rectangle)：

<rect/>

属性：

width="数值" 定义矩形的宽度

x="数值"定义矩形的左边位置

y="数值"定义矩形的右边位置

height="数值" 定义矩形的高度

fill="颜色值" 定义矩形的填充颜色

fill-opacity="数值" 定义矩形填充颜色的透明度（0-1；值越小，越透明）

stroke-width="数值"定义矩形的边框宽度

stroke="颜色值" 定义矩形边框的颜色

stroke-opacity="数值" 定义矩形边框颜色的透明度（0-1；值越小，越透明）

opacity=''数值'' 设置整个元素的透明度，对图形的填充颜色和边框颜色同时生效（0-1；值越小，越透明）

rx="数值" ry="数值" 定义矩形的圆角分别在水平和垂直方向的半径长度，rx=ry圆角为圆形，rx不等于ry圆角则为椭圆形

2.圆：<circle/>

属性：

r="数值" 定义圆的半径

cx="数值" 定义圆心的水平方向坐标

cy="数值" 定义圆心的垂直方向坐标

默认圆心位置为（0，0）

3.椭圆：<ellipse/>

属性：

cx="数值" 定义椭圆中心的水平方向坐标

cy="数值" 定义椭圆中心的垂直方向坐标

rx="数值" 定义椭圆的水平方向半径

ry="数值" 定义椭圆的垂直方向半径

椭圆的位置由cx、cy决定，大小由rx、ry决定。

注：stroke、stroke-width、fill这三个属性，常见的图形绘制都可以使用。