概要总结
1、矩形、圆形、椭圆形的公共属性
2、矩形rect
3、圆形circle
4、椭圆形ellipse
5、嵌套多个图形
一、SVG形状元素
SVG有一些预定义的形状元素可以供开发者使用，这些元素分别是矩形rect、圆形circle、椭圆ellipse、线条line、多线条polyline、多边形polygon、路径path。
二、公共属性
1、stroke: 边框颜色。
2、stroke-width: 边框宽度，Number类型。
3、stroke-opacity: 描边颜色的不透明度，合法值的范围是0~1。
4、fill: 填充颜色，值为合法颜色，例如颜色名称、rgb颜色值、十六进制颜色值等。
5、fill-opacity: 填充颜色的不透明度，合法值的范围是0~1。
6、opacity: 整个矩形的不透明度，合法值的范围是0~1。
三、矩形react
1、属性
(1)width: 宽度，Number类型。
(2)height: 高度，Number类型。
(3)x: 矩形的左边位置，Number类型。
(4)y: 矩形的顶部位置，Number类型。
(5)rx: 定义圆角x轴方向的半径长度，Number类型。
(6)ry: 定义圆角y轴方向的半径长度，Number类型。
2、案例
(1)width、height、fill、stroke、stroke-width属性
<svg width="400" height="110">
<rect width="300" height="100" fill="blue" stroke-width="3" stroke="black"/>
</svg>
(2)x、y、width、height、stroke、stroke-width、stroke-opacity、fill、fill-opacity属性
<svg width="400" height="180" style="background: #eee">
<rect
x="50"
y="20"
width="150"
height="150"
stroke="tomato"
stroke-width="5"
stroke-opacity="0.9
fill="blue"
fill-opacity="0.1"
/>
</svg>
(3)opacity属性
可以给整个矩形设置opacity透明度属性，它会将整个矩形包括边框和填充色都加上透明度。
<svg width="400" height="180" style="background: #eee">
<rect
x="50"
y="20"
width="150"
height="150"
stroke="tomato"
stroke-width="5"
fill="blue"
opacity="0.5"
/>
</svg>
(4)圆角矩形
圆角矩形通过给rect定义的rx、ry两个属性来实现。rx定义圆角x轴方向的半径长度，ry定义圆角y轴方向的半径长度。
如果rx = ry，那就是圆形的角，否则是椭圆形的角。
1.圆形角
<svg width="400" height="180" style="background: #eee">
<rect
......
rx="20"
ry="20"
/>
</svg>
2.椭圆形角
<svg width="400" height="180" style="background: #eee">
<rect
......
rx="20"
ry="30"
/>
</svg>
3、代码演示
四、圆形Circle
1、属性
(1)cx: 圆心的x坐标，Number类型。
(2)cy: 圆心的y坐标，Number类型。
(3)r: 圆半径，Number类型。
2、案例
通过cx、cy、r三个属性绘制一个圆形。
<svg width="100" height="100" style="background: #eee">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
</svg>
3、代码演示
五、椭圆ellipse
椭圆与圆密切相关，区别在于椭圆的x和y半径是不同的，而圆的x和y半径是相等的。
1、属性
(1)cx: 椭圆中心的x坐标，Number类型。
(2)cy: 椭圆中心的y坐标，Number类型。
(3)rx: 椭圆的水平半径，Number类型。
(4)ry: 椭圆的垂直半径，Number类型。
2、案例
通过cx、cy、rx、ry四个属性绘制一个椭圆形。
<svg width="500" height="140" style="background: #eee">
<ellipse cx="200" cy="80" rx="100" ry="50" stroke="purple" stroke-width="2" fill="yellow" />
</svg>
3、代码演示
六、svg嵌套多个图形
图形的顺序并不是html书写的顺序，而是取决于它们的属性配置的位置、大小。
1、堆叠椭圆
<svg width="500" height="150" style="background: #eee">
<ellipse cx="240" cy="100" rx="220" ry="30" fill="purple"/>
<ellipse cx="220" cy="70" rx="190" ry="20" fill="lime"/>
<ellipse cx="210" cy="45" rx="170" ry="15" fill="yellow"/>
</svg>
2、空心椭圆
<svg width="500" height="100" style="background: #eee">
<ellipse cx="240" cy="50" rx="220" ry="30" fill="yellow"/>
<ellipse cx="220" cy="50" rx="190" ry="20" fill="white"/>
</svg>
3、代码演示
七、代码链接
gitee.com/huang_jing_…
