svg 的 `
在 SVG 渲染机制中，滤镜（<filter>）默认基于元素的边界框（bounding box） 进行计算，而非其实际绘制形状。这意味着即使你为 <rect> 设置了 rx="8"，一旦添加 filter 属性，滤镜处理器仍会将该矩形视为一个尖角矩形来采样、模糊或混合——最终导致圆角被“裁切”或视觉上丢失。
一个常见误区是试图通过 feComponentTransfer 或 feComposite 强制保留圆角，但更简洁、可靠且符合 SVG 分层设计哲学的方案是：分层绘制（Layering）。
✅ 推荐做法：背景层 + 前景动画层
- 背景层：一个静止的、带 rx 和纯色/渐变填充的 <rect>，负责呈现圆角外形；
- 前景层：一个独立的、无 rx（或可选 rx，但不依赖它实现圆角）、带 filter 或 animate 的 <rect>，仅负责动态效果（如位移动画、颜色过渡等），其内容严格限制在背景层可视区域内。
由于 SVG 绘制顺序由 DOM 顺序决定（后绘制的元素覆盖前面的），只需确保背景矩形在前、动画矩形在后即可自然合成。
以下是修正后的完整示例（兼容动画 + 渐变 + 圆角 + 无滤镜干扰）：
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<defs>
<linearGradient id="animation">
<stop offset="0" stop-color="rgba(248, 222, 86, 0)"/>
<stop offset="100%" stop-color="#65ae83"/>
</linearGradient>
</defs>
<!-- ✅ 背景层：提供圆角视觉容器 -->
<rect x="0" y="0" width="200" height="200" rx="8" ry="8" fill="#488764" />
<!-- ✅ 前景层：承载动画与渐变，宽度限制在背景内 -->
<rect x="0" y="0" width="100" height="200" fill="url(#animation)" rx="8" ry="8">
<animate
attributeName="x"
from="0" to="100"
dur="1s"
repeatCount="indefinite"
calcMode="spline"
keySplines="0.42 0 0.58 1"
/>
</rect>
</svg>? 关键说明：rx 和 ry 同时设置更稳妥（部分渲染器对单边 rx 支持不一致）；前景 <rect> 的 rx 可保留（用于内部描边或子内容对齐），但圆角视觉完整性完全由背景层保障；若必须使用滤镜（如阴影、发光），应将滤镜应用于背景层，而非动画层——因为滤镜无需随动画重计算，静态应用更高效；动画属性（如 x, y, width）不会影响 rx 的渲染逻辑，因此前景层可自由动画，只要其 x/width 始终在背景圆角区域内，整体视觉即保持圆润。
⚠️ 注意事项
- ❌ 不要对带 rx 的 <rect> 直接施加 filter 并期望圆角参与滤镜运算（SVG 1.1 / 2 规范未定义此行为，各浏览器表现不一）；
- ✅ 如需滤镜效果（如外阴影），建议用 <feDropShadow> 作用于背景层，或使用 <mask> + <filter> 组合实现精确边缘控制；
- ✅ 对于复杂交互动画，可进一步封装为 <g> 分组，统一管理 transform，避免 x/y 动画带来的布局偏移问题。
通过这种分层策略，你既能保留 SVG 的轻量性与性能优势，又能精准控制视觉细节——圆角不再被滤镜“吃掉”，动画依然流畅，渐变照常生效。
