SVG 中矩形圆角与滤镜共存的正确实现方法

svg 的 `` 元素在同时设置 `rx`（圆角）和 `filter`（滤镜）时，滤镜会作用于原始几何边界（即未应用圆角的矩形），导致视觉上圆角失效；解决方法 是分离渲染层：用无滤镜的圆角背景矩形承载视觉圆角，再叠加带滤镜或动画的前景内容。

在 SVG 渲染机制中，滤镜（）默认基于元素的 边界框（bounding box） 进行计算，而非其实际绘制形状。这意味着即使你为 设置了 rx=”8″，一旦添加 filter 属性，滤镜 处理器 仍会将该矩形视为一个尖角矩形来采样、模糊或混合——最终导致圆角被“裁切”或视觉上丢失。

一个常见误区是试图通过 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 的轻量性与性能优势，又能精准控制视觉细节——圆角不再被滤镜“吃掉”，动画依然流畅，渐变照常生效。