Safari 因其严格的 SVG 解析规则，常因嵌套 SVG、重复命名空间或冗余结构导致动画 SVG 无法渲染；本文提供精简结构、移除嵌套、统一命名空间的标准化解决方案，并附可直接运行的代码示例。
safari 因其严格的 svg 解析规则，常因嵌套 svg、重复命名空间或冗余结构导致动画 svg 无法渲染；本文提供精简结构、移除嵌套、统一命名空间的标准化解决方案，并附可直接运行的代码示例。
Safari 对 SVG 的 DOM 结构和语法容错性较低，尤其对嵌套 <svg> 元素、重复声明命名空间（如 xmlns 和 xlink 多次出现）、以及未闭合或格式异常的 <animate> 标签极为敏感。原始代码中存在明显的结构性问题：外层 <svg> 内又包裹了一个完全相同的 <svg>，形成非法嵌套；同时 xmlns:xlink 在现代 SVG 中已非必需（xlink:href 已被原生 href 取代），且重复定义会触发 Safari 的解析中断，导致整个 SVG 渲染失败。
✅ 正确做法是：扁平化结构、移除嵌套、精简命名空间、确保动画标签闭合规范。以下为修复后的完整、跨浏览器兼容（含 Safari 14+、Chrome、Firefox）的 SVG 动画代码：
<style>
.blob {
display: block;
width: 100%;
max-width: 500px;
height: auto;
overflow: visible;
filter: blur(18px);
}
</style>
<svg class="blob" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="rgb(23, 248, 194)" />
<stop offset="100%" stop-color="rgb(78, 50, 195)" />
</linearGradient>
</defs>
<path fill="url(#gradient)">
<animate
attributeName="d"
dur="20000ms"
repeatCount="indefinite"
easing="ease-out"
values="
M441.5,323.5Q425,397,357,435Q289,473,216.5,453.5Q144,434,84,383Q24,332,32,252.5Q40,173,96.5,127.5Q153,82,216.5,81Q280,80,324,115.5Q368,151,413,200.5Q458,250,441.5,323.5Z;
M440.5,315Q405,380,343,402Q281,424,228,402Q175,380,100,356Q25,332,51,259.5Q77,187,117,137.5Q157,88,222.5,62Q288,36,350.5,74.5Q413,113,444.5,181.5Q476,250,440.5,315Z;
M413,307Q386,364,334.5,399Q283,434,210.5,439Q138,444,79.5,388.5Q21,333,61,264.5Q101,196,122.5,131Q144,66,218,39.5Q292,13,359,58Q426,103,433,176.5Q440,250,413,307Z;
M441.5,323.5Q425,397,357,435Q289,473,216.5,453.5Q144,434,84,383Q24,332,32,252.5Q40,173,96.5,127.5Q153,82,216.5,81Q280,80,324,115.5Q368,151,413,200.5Q458,250,441.5,323.5Z;
" />
</path>
</svg>? 关键修复点说明：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- ❌ 移除所有嵌套 <svg> 标签（原始代码中两层 <svg> 嵌套是 Safari 拒绝渲染的主因）；
- ✅ 仅保留一个顶层 <svg>，xmlns 声明一次即可，xmlns:xlink 完全删除（SVG 2 规范已弃用）；
- ✅ 使用自闭合 <stop> 和 <animate> 标签（更符合 XML 语法，提升 Safari 兼容性）；
- ✅ 将 animationTimingFunction 改为标准 CSS 属性名 easing（SVG 动画属性名应为 easing，animationTimingFunction 是 CSS 动画写法，混用易出错）；
- ✅ 添加 .blob { display: block; } 防止行内元素布局塌陷，确保尺寸可控。
? 额外建议：
- 若需支持 Safari 13 或更早版本，请避免使用 easing，改用 keySplines 配合 calcMode="spline" 实现缓动；
- 在生产环境推荐将 SVG 内联为独立组件，或转为 <img src="blob.svg"> 引入（此时需确保 SVG 文件本身结构合规）；
- 使用 SVGOMG 工具自动压缩与校验 SVG 语法，预防隐性错误。
遵循以上规范后，该 Blob 形变动画将在 Safari 中稳定呈现，同时保持在 Chrome、Firefox、Edge 等主流浏览器中一致表现。
