svg 的 `
在 SVG 渲染中，filter 作用于元素的 几何边界框（bounding box），而非其视觉轮廓。当 <rect rx="8"> 应用了滤镜（如 feFlood + feBlend），浏览器会先提取该矩形未裁剪的矩形区域（即 rx 被忽略的轴对齐包围盒），再在此区域上应用滤镜效果——导致圆角视觉上“消失”。
直接为带 filter 的 <rect> 设置 rx 无法生效，这是 SVG 规范行为，而非浏览器 Bug。关键在于：滤镜不改变形状，只处理像素；圆角是形状属性，需在滤镜作用前或独立层中实现。
✅ 推荐方案：分层绘制（背景层 + 动画层）
最稳健、语义清晰且完全兼容动画与渐变的方式是 分离职责：
- 使用一个静态 <rect> 作为带圆角的“底色层”（可设 fill 为纯色或渐变）；
- 另一个 <rect> 仅负责动画与内容（如渐变填充、位移），置于其上，不加 filter；
- 若需滤镜效果（如阴影、发光、颜色叠加），则将滤镜应用于底层矩形，或通过 feComposite 等方式合成。
但注意：原问题中 fill 被用于动画（url(#animation)），而 filter 又需保留圆角——此时不能让同一元素同时承担滤镜与动画渐变，否则 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 x="0" y="0" width="100" height="200" rx="8" ry="8" fill="#488764" />
<!-- 前层：带动画与渐变的圆角矩形（无 filter，但保留 rx） -->
<rect x="0" y="0" width="100" height="200" rx="8" ry="8" fill="url(#animation)">
<animate
attributeName="x"
from="-100" to="100"
dur="1s"
repeatCount="indefinite"
calcMode="linear" />
</rect>
</svg>✅ 优势：rx/ry 始终生效；动画与渐变完全可控；无需 hack 或 clipPath；兼容所有现代浏览器。
⚠️ 替代方案说明（慎用）
- clipPath 包裹法：用 <clipPath> 定义圆角路径，再包裹带 filter 的 <rect>。虽可行，但增加 DOM 复杂度，且 clipPath 本身不参与滤镜坐标系，易引发定位偏移。
- feComponentTransfer 或 feColorMatrix 模拟背景色：若必须复现原 feFlood 效果，建议改用 <feFlood> + <feComposite> 在滤镜内部合成，但需确保 filterUnits="userSpaceOnUse" 下的尺寸精确匹配圆角矩形——这反而使问题更复杂。
? 总结
| 场景 | 是否推荐 | 说明 |
|---|---|---|
| filter + rx 同时作用于单个 <rect> | ❌ 不可行 | SVG 规范限制，滤镜无视圆角形状 |
| 分层：底层圆角 + 前层动画渐变 | ✅ 强烈推荐 | 简洁、可靠、可维护、支持任意动画 |
| clipPath + filter 组合 | △ 可行但冗余 | 适合复杂遮罩，非必要不引入 |
只要将“圆角形状”与“滤镜效果”解耦到不同图层，即可彻底规避该限制。记住：SVG 是声明式矢量绘图，善用图层和语义分离，比强行在一个元素上堆叠所有属性更高效、更健壮。
