svg 的 `
在 SVG 中，当为 <rect> 同时指定 filter 和 rx（或 ry）时，浏览器会忽略圆角渲染——这不是 Bug，而是 SVG 渲染规范的行为：滤镜处理的是元素的“边界框（bounding box）”，而非其实际几何形状；因此即使设置了 rx="8"，滤镜仍基于未圆角的矩形区域进行计算与合成，最终视觉上表现为直角。
❌ 为什么原方案失效？
原代码中：
<rect width="100" height="200" filter="url(#floodFilter)" fill="url(#animation)" rx="8"> <animate attributeName="x" from="-100" to="100" dur="1s" repeatCount="indefinite"/> </rect>
filter 触发了 SourceGraphic 的完整边界框采样（含潜在透明扩展），而 rx 仅影响填充路径的形状，两者在滤镜上下文中无法协同生效。
✅ 推荐解法：分层绘制（Background + Foreground）
核心思路是将圆角逻辑从滤镜依赖中解耦：用一个静止的、带 rx 的底层 <rect> 承担圆角视觉容器角色，再在其上叠加无滤镜但支持动画/渐变的前景 <rect>。这样既保留圆角外观，又不影响动画与渐变控制。
✅ 正确实现示例（兼容动画与渐变）：
<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 width="100" height="200" rx="8" ry="8" fill="#488764" />
<!-- 前层：带动画与渐变的矩形（无 filter，但严格对齐底层） -->
<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>? 关键要点：底层 <rect> 使用不透明纯色（如 #488764）模拟 feFlood 效果，同时通过 rx/ry 确保整体容器为圆角；前层 <rect> 不设 filter，但保留 rx/ry（现代浏览器支持独立渲染圆角路径，即使无滤镜）；两层 width/height/rx/ry 必须完全一致，且 x/y 对齐，否则出现错位；动画仅作用于前层，确保 fill="url(#animation)" 可自由更新。
⚠️ 注意事项
- 若必须使用 feFlood + feBlend 实现动态背景色，可将 feFlood 替换为带 rx 的 <rect> + <use> 或 <g> 包裹，避免滤镜介入；
- 不要尝试用 clipPath 强制裁剪——它会破坏 animate 的 x 位移平滑性，且增加 DOM 复杂度；
- rx 值不应超过 width/2 或 height/2，否则被截断为最大允许值。
✅ 总结
SVG 圆角与滤镜不可兼得是底层渲染限制，但通过「视觉分层」策略（静态圆角底板 + 动态内容前景）可完美兼顾：既保持设计所需的圆角外观与色彩效果，又完全释放 animate、linearGradient 等动态能力。这是生产环境中稳定、可维护、跨浏览器兼容的最佳实践。
