保留圆角（rx）效果
" />
svg 中对 `
在 SVG 渲染机制中，filter 作用于元素的包围盒（bounding box），而非其最终视觉形状。这意味着即使你设置了 rx="8"，滤镜仍会在未裁剪的直角矩形区域上执行（如 feFlood 填满整个宽高），导致圆角被“覆盖”或视觉上丢失。尤其当 fill 需用于动画（如线性渐变位移）时，无法直接用 fill 模拟滤镜颜色，传统方案受限。
✅ 正确思路是：分层渲染，职责分离
-
底层（静态）：一个与容器同尺寸、带 rx 的
，使用滤镜中的目标背景色（如 #65ae83）填充，提供圆角基底； - 上层（动态）：实际动画矩形，仅负责渐变填充和 x 位移动画，同样设置 rx="8" 以保持形状一致；
- 两者 rx 值严格对齐，视觉叠加后形成“带滤镜质感的圆角动画矩形”。
以下是可直接运行的优化示例：
? 关键注意事项：
- rx 值必须在两层矩形中完全一致，否则出现错位或露边；
- 若需更复杂的滤镜效果（如阴影、模糊），可将 feDropShadow 或 feGaussianBlur 单独应用于底层矩形，而非整个组合；
- 动画 attributeName="x" 推荐配合 calcMode="spline" 实现平滑缓动，提升视觉体验；
- 不要给上层矩形添加 filter 属性——这会再次触发包围盒计算，破坏圆角。
这种分层策略规避了 SVG 滤镜与圆角的底层冲突，同时完全兼容 fill 动画需求，是兼顾表现力与规范性的生产级解法。
