SVG 样例解析
生成逻辑
坐标系与画布
SVG 的 viewBox="-300 -300 600 600" 将坐标原点移到画布中心，整个花朵以 (0,0) 为圆心向外绘制。
整体层次结构
花朵 #flower 由三层叠加而成：
#flower
├── #outer-petals 外层20片花瓣
├── #inner-petals 内层20片花瓣（旋转9°，缩放0.33）
└── #overlay 径向渐变蒙层（压在最上面）
单片花瓣的构成
每片花瓣是一个 <g class="segment">，由两个 path 叠加：
填充路径 .segment-fill：
d="M0,0 v-200 a40,40 0 0,0 -62,10 z"
M0,0：从圆心出发v-200：向上画竖线到 (0,-200)，即花瓣的主干轴a40,40 0 0,0 -62,10：画一段圆弧，rx=ry=40，逆时针（sweep=0），终点偏移 (-62,10)，即到达 (-62,-190)，这段弧形成花瓣的弯曲外缘z：闭合回原点，形成扇形花瓣面
边缘路径 .segment-edge：
d="M0,-200 a40,40 0 0,0 -62,10"
与 segment-fill 中的圆弧完全重合，单独绘制以便用更粗的描边（stroke-width:3/9）突出花瓣轮廓，无填充。
20片花瓣的排列
花瓣每隔 18° 旋转一次（360°/20片=18°），分4个 .quadrant 组，每组5片，旋转角度从 0° 到 342°。旋转变换作用在 <g class="segment"> 上，以坐标原点为中心旋转，使所有花瓣均匀分布一圈。
内外两层的差异
外层 #outer-petals |
内层 #inner-petals |
|
|---|---|---|
| 尺寸 | 原始大小（半径约200） | scale(0.33) 缩到约1/3 |
| 旋转偏移 | 0° | rotate(9°)，正好错位在外层花瓣之间 |
| 颜色 | azure / deepskyblue | yellow / yellowgreen |
| hover 颜色 | plum / slateblue | darkseagreen / green |
| 透明度 | opacity: 0.75 | 默认 1.0 |
径向渐变蒙层
<defs> 中定义了 <radialGradient id="fade">，圆心在 (0,0)，半径200，渐变从33%处的蓝色过渡到95%处的白色。一个半径200的圆 #overlay 引用此渐变 fill="url(#fade)"，覆盖在所有花瓣之上，制造出花朵中央深蓝、边缘淡白的光晕效果。
CSS 交互样式
用 CSS 变量（var(--xxx)）统一配置内外层的颜色，:hover 伪类实现鼠标悬停变色。同时保留了兼容旧浏览器的直接 class 样式写法（注释中说明这是非标准的旧方式）。