SVG 中 rect 元素应用 filter 后圆角失效的解决方案

svg 的 `` 在添加 `Filter` 属性后，`rx`/`ry` 圆角会丢失——这是因为滤镜默认在原始矩形（无圆角）的边界框上执行渲染。本文提供兼容滤镜与圆角的可靠实现方案，并兼顾动画与渐变填充需求。

在 svg 渲染中，filter 作用于元素的 几何边界框（bounding box），而非其视觉轮廓。当 应用了滤镜（如 feFlood + feblend），浏览器会先提取该矩形未裁剪的矩形区域（即 rx 被忽略的轴对齐包围盒），再在此区域上应用滤镜效果——导致圆角视觉上“消失”。

直接为带 filter 的 设置 rx 无法生效，这是 SVG 规范行为，而非浏览器 bug。关键在于：滤镜不改变形状，只处理像素；圆角是形状属性，需在滤镜作用前或独立层中实现。

✅ 推荐方案：分层绘制（背景层 + 动画层）

最稳健、语义清晰且完全兼容动画与渐变的方式是 分离职责：

• 使用一个静态 作为带圆角的“底色层”（可设 fill 为纯色或渐变）；
• 另一个 仅负责动画与内容（如渐变填充、位移），置于其上，不加 filter；
• 若需滤镜效果（如阴影、发光、颜色叠加），则将滤镜应用于底层矩形，或通过 feComposite 等方式合成。

但注意：原问题中 fill 被用于动画（url(#animation)），而 filter 又需保留圆角——此时不能让同一元素同时承担滤镜与动画渐变，否则 rx 仍会失效。

因此，正确做法是：

✅ 优势：rx/ry 始终生效；动画与渐变完全可控；无需 hack 或 clipPath；兼容所有现代浏览器。

⚠️ 替代方案说明（慎用）

• clipPath 包裹法：用 定义圆角路径，再包裹带 filter 的 。虽可行，但增加 dom 复杂度，且 clipPath 本身不参与滤镜坐标系，易引发定位偏移。
• feComponentTransfer 或 feColorMatrix 模拟背景色：若必须复现原 feFlood 效果，建议改用 + 在滤镜内部合成，但需确保 filterUnits=”userSpaceOnUse” 下的尺寸精确匹配圆角矩形——这反而使问题更复杂。

? 总结

只要将“圆角形状”与“滤镜效果”解耦到不同图层，即可彻底规避该限制。记住：SVG 是声明式矢量绘图，善用图层和语义分离，比强行在一个元素上堆叠所有属性更高效、更健壮。