svg 的 `
在 SVG 渲染机制中，滤镜（
一个常见误区是试图通过 feComponentTransfer 或 feComposite 强制保留圆角，但更简洁、可靠且符合 SVG 分层设计哲学的方案是：分层绘制（Layering）。
✅ 推荐做法：背景层 + 前景动画层
-
背景层：一个静止的、带 rx 和纯色/渐变填充的
，负责呈现圆角外形； -
前景层：一个独立的、无 rx（或可选 rx，但不依赖它实现圆角）、带 filter 或 animate 的
，仅负责动态效果（如位移动画、颜色过渡等），其内容严格限制在背景层可视区域内。
由于 SVG 绘制顺序由 DOM 顺序决定（后绘制的元素覆盖前面的），只需确保背景矩形在前、动画矩形在后即可自然合成。
以下是修正后的完整示例（兼容动画 + 渐变 + 圆角 + 无滤镜干扰）：
? 关键说明：rx 和 ry 同时设置更稳妥（部分渲染器对单边 rx 支持不一致）；前景 的 rx 可保留（用于内部描边或子内容对齐），但圆角视觉完整性完全由背景层保障；若必须使用滤镜（如阴影、发光），应将滤镜应用于背景层，而非动画层——因为滤镜无需随动画重计算，静态应用更高效；动画属性（如 x, y, width）不会影响 rx 的渲染逻辑，因此前景层可自由动画，只要其 x/width 始终在背景圆角区域内，整体视觉即保持圆润。
⚠️ 注意事项
- ❌ 不要对带 rx 的
直接施加 filter 并期望圆角参与滤镜运算（SVG 1.1 / 2 规范未定义此行为，各浏览器表现不一）； - ✅ 如需滤镜效果（如外阴影），建议用
作用于背景层，或使用 + 组合实现精确边缘控制； - ✅ 对于复杂交互动画，可进一步封装为
分组，统一管理 transform，避免 x/y 动画带来的布局偏移问题。
通过这种分层策略，你既能保留 SVG 的轻量性与性能优势，又能精准控制视觉细节——圆角不再被滤镜“吃掉”，动画依然流畅，渐变照常生效。
