<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="325px" height="325px">
<path d="M40 40
A 90 90, 0, 0, 0, 130 130
L 130 110 A 70 70 0 0 0,200 40
L 140 40 A 10 10 0,0,0,130 30
L130 10 A 30 30 0 0 0 100 40 Z" fill="rgba(255,169,7,.5)" stroke-width='3'
stroke='black' />
<path d="M80 80
A 45 45, 0, 0, 0, 125 125
L 125 80 Z" fill="green"/>
<path d="M230 80
A 45 45, 0, 1, 0, 275 125
L 275 80 Z" fill="red"/>
<path d="M80 230
A 45 45, 0, 0, 1, 125 275
L 125 230 Z" fill="purple"/>
<path d="M230 230
A 45 45, 0, 1, 1, 275 275
L 275 230 Z" fill="blue"/>
</svg>
</body>
</html>
步骤（风圈）：
例如 风圈4个半径为 R1（10）,R2（20）,R3（30）,R4（5）,中心点位置（15,35）
第一个风圈圆
<path d="M5,35 A 10 10 0 0 0 15 45"
fill="rgba(255,169,7,.5)" stroke-width='3'
stroke='black' />
M（15-R1,35）
A(R1 R1 0 0 0 15 35+R1)
效果如图
第二个：
<path d="M5,35 A 10 10 0 0 0 15 45 L 15 55 A 20 20 0 0 0 35 35"
fill="rgba(255,169,7,.5)" stroke-width='3'
stroke='black' />
L（15,35+R2）
A(R2 R2 0 0 0 15+R2 35)
第三：
<path d="M5,35 A 10 10 0 0 0 15 45
L 15 55 A 20 20 0 0 0 35 35
L45 35 A 30 30 0 0 0 15 5"
fill="rgba(255,169,7,.5)" stroke-width='3'
stroke='black' />
L（15+R3,35）
A(R3 R3 0 0 0 15 35-R3)
第四个：
<path d="M5,35 A 10 10 0 0 0 15 45
L 15 55 A 20 20 0 0 0 35 35
L45 35 A 30 30 0 0 0 15 5
L15 30 A 5 5 0 0 0 10 35 z"
fill="rgba(255,169,7,.5)" stroke-width='3'
stroke='black' />
L（15,35-R4）
A(R4 R4 0 0 0 15-R4 35)
知识拓展链接：
https://www.cnblogs.com/dxy1982/archive/2012/04/06/2395729.html
3224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
