iOS端SVG动画背景显示黑色异常的技术求助

我已将以下SVG动画添加至网站首页Hero区域：

<div id="bg-wrap">
  <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
                <defs>
                <radialGradient id="Gradient1" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5"><animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(255, 0, 255, 1)"></stop><stop offset="100%" stop-color="rgba(255, 0, 255, 0)"></stop></radialGradient>
                <radialGradient id="Gradient2" cx="50%" cy="50%" fx="2.68147%" fy="50%" r=".5"><animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(255, 255, 0, 1)"></stop><stop offset="100%" stop-color="rgba(255, 255, 0, 0)"></stop></radialGradient>
                <radialGradient id="Gradient3" cx="50%" cy="50%" fx="0.836536%" fy="50%" r=".5"><animate attributeName="fx" dur="21.5s" values="0%;3%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(0, 255, 255, 1)"></stop><stop offset="100%" stop-color="rgba(0, 255, 255, 0)"></stop></radialGradient>
                <radialGradient id="Gradient4" cx="50%" cy="50%" fx="4.56417%" fy="50%" r=".5"><animate attributeName="fx" dur="23s" values="0%;5%;0%" repeatCount="indefinite"></animate><stop offset="0%" stop-color="rgba(0, 255, 0, 1)"></stop><stop offset="100%" stop-color="rgba(0, 255, 0, 0)"></stop></radialGradient>
                </defs>
                <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient4)">
                <animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite" />
                <animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite" />
                <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="17s" repeatCount="indefinite"/>
                </rect>
                <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient5)">
                <animate attributeName="x" dur="23s" values="0%;-25%;0%" repeatCount="indefinite" />
                <animate attributeName="y" dur="24s" values="25%;-25%;25%" repeatCount="indefinite" />
                <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="18s" repeatCount="indefinite"/>
                </rect>
                <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient6)">
                <animate attributeName="x" dur="25s" values="-25%;0%;-25%" repeatCount="indefinite" />
                <animate attributeName="y" dur="26s" values="0%;-25%;0%" repeatCount="indefinite" />
                <animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="19s" repeatCount="indefinite"/>
                </rect>
                <rect x="13.744%" y="1.18473%" width="100%" height="100%" fill="url(#Gradient1)" transform="rotate(334.41 50 50)"><animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite"></animate><animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="7s" repeatCount="indefinite"></animateTransform></rect>
                <rect x="-2.17916%" y="35.4267%" width="100%" height="100%" fill="url(#Gradient2)" transform="rotate(255.072 50 50)"><animate attributeName="x" dur="23s" values="-25%;0%;-25%" repeatCount="indefinite"></animate><animate attributeName="y" dur="24s" values="0%;50%;0%" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="12s" repeatCount="indefinite"></animateTransform>
                </rect>
                <rect x="9.00483%" y="14.5733%" width="100%" height="100%" fill="url(#Gradient3)" transform="rotate(139.903 50 50)"><animate attributeName="x" dur="25s" values="0%;25%;0%" repeatCount="indefinite"></animate><animate attributeName="y" dur="19s" values="0%;25%;0%" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="9s" repeatCount="indefinite"></animateTransform>
                </rect>
                </svg>
</div>

该动画在电脑及非iOS移动端显示正常，但在iOS设备上打开网站时，SVG动画背景呈现黑色，尽管我已为#bg-wrap容器及body元素设置了白色背景。iOS端显示效果为SVG动画区域呈现黑色背景，覆盖了设置的白色背景。

可能的问题原因 #

• 未定义的渐变引用：SVG中有两个矩形分别引用了#Gradient5和#Gradient6，但在<defs>标签内只定义了Gradient1至Gradient4四个渐变。Safari（iOS端）对未定义的资源处理更为严格，会默认用黑色填充缺失的渐变，这是最直接的诱因。
• SVG自身背景未明确设置：即使父容器设置了白色背景，SVG元素自身如果未明确指定背景色，Safari在处理带动画的渐变时，可能会将透明区域渲染为黑色，尤其是当存在无效资源引用时，这种异常渲染会被放大。
• 动画属性的兼容性差异：部分SVG动画属性（如animateTransform的旋转逻辑）在Safari中的解析与其他浏览器不同，结合无效渐变引用时，会触发渲染异常，导致黑色背景出现。

解决建议 #

1. 补全缺失的渐变定义：在<defs>中添加Gradient5和Gradient6的定义，参考已有的渐变结构设置颜色和动画；如果是笔误，直接将对应矩形的fill属性修改为已存在的渐变ID。
2. 为SVG元素设置白色背景：在<svg>标签中添加内联样式style="background-color: #ffffff;"，确保SVG自身背景为白色，覆盖Safari的默认黑色。
3. 检查动画属性兼容性：统一动画values中的格式，或为动画添加fill="freeze"等属性，确保Safari能正确解析动画逻辑，避免因解析错误导致的渲染异常。

内容的提问来源于stack exchange，提问作者Muhammad Hafizullah