svg 的 `
在 SVG 中，当为
❌ 为什么原方案失效？
原代码中：
filter 触发了 SourceGraphic 的完整边界框采样（含潜在透明扩展），而 rx 仅影响填充路径的形状，两者在滤镜上下文中无法协同生效。
✅ 推荐解法：分层绘制（Background + Foreground）
核心思路是将圆角逻辑从滤镜依赖中解耦：用一个静止的、带 rx 的底层
✅ 正确实现示例（兼容动画与渐变）：
? 关键要点：底层 使用不透明纯色（如 #488764）模拟 feFlood 效果，同时通过 rx/ry 确保整体容器为圆角；前层 不设 filter，但保留 rx/ry（现代浏览器支持独立渲染圆角路径，即使无滤镜）；两层 width/height/rx/ry 必须完全一致，且 x/y 对齐，否则出现错位；动画仅作用于前层，确保 fill="url(#animation)" 可自由更新。
⚠️ 注意事项
- 若必须使用 feFlood + feBlend 实现动态背景色，可将 feFlood 替换为带 rx 的
+ ，避免滤镜介入； - 不要尝试用 clipPath 强制裁剪——它会破坏 animate 的 x 位移平滑性，且增加 DOM 复杂度；
- rx 值不应超过 width/2 或 height/2，否则被截断为最大允许值。
✅ 总结
SVG 圆角与滤镜不可兼得是底层渲染限制，但通过「视觉分层」策略（静态圆角底板 + 动态内容前景）可完美兼顾：既保持设计所需的圆角外观与色彩效果，又完全释放 animate、linearGradient 等动态能力。这是生产环境中稳定、可维护、跨浏览器兼容的最佳实践。
