如何修复 Safari 中 SVG 不显示的问题-html教程-PHP中文网

如何修复 Safari 中 SVG 不显示的问题

Safari 因其严格的 SVG 解析规则，常因嵌套 SVG、重复命名空间或冗余结构导致动画 SVG 无法渲染；本文提供精简结构、移除嵌套、统一命名空间的标准化解决方案，并附可直接运行的代码示例。

safari 因其严格的 svg 解析规则，常因嵌套 svg、重复命名空间或冗余结构导致动画 svg 无法渲染；本文提供精简结构、移除嵌套、统一命名空间的标准化解决方案，并附可直接运行的代码示例。

Safari 对 SVG 的 DOM 结构和语法容错性较低，尤其对嵌套、重复声明命名空间（如 xmlns 和 xlink 多次出现）、以及未闭合或格式异常的标签极为敏感。原始代码中存在明显的结构性问题：外层

✅ 正确做法是：扁平化结构、移除嵌套、精简命名空间、确保动画标签闭合规范。以下为修复后的完整、跨浏览器兼容（含 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><stop offset="100%" stop-color="rgb(78, 50, 195)"></stop></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;
      "></animate></path></svg>

? 关键修复点说明：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

❌ 移除所有嵌套
✅ 仅保留一个顶层
✅ 使用自闭合和标签（更符合 XML 语法，提升 Safari 兼容性）；
✅ 将 animationTimingFunction 改为标准 CSS 属性名 easing（SVG 动画属性名应为 easing，animationTimingFunction 是 CSS 动画写法，混用易出错）；
✅ 添加 .blob { display: block; } 防止行内元素布局塌陷，确保尺寸可控。

? 额外建议：