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