JS动态创建的SVG动画在iOS全浏览器无法正常运行问题求助

问题根因 #

• iOS 全平台浏览器（包括套壳的Chrome/Edge/Firefox，内核均为苹果强制要求的WebKit）对SVG SMIL动画的解析、触发逻辑比其他内核严格，触发问题的核心点如下：
  1. 动态插入的<animate>元素不会自动触发播放，必须手动调用beginElement()方法才会启动动画
  2. 对points、keyTimes、keySplines、from、to属性的格式校验更严格，不允许属性值内部出现多余的空格、混用分隔符
  3. 动态替换SVG元素时，WebKit会保留旧SVG的渲染缓存，直接移除插入会出现闪烁
  4. 当前.mobiNav_overlay没有设置定位和明确高度规则，iOS下高度计算会出现异常，导致SVG无法渲染显示

修复方案 #

核心修改点 #

1. 修正所有动画相关属性的格式，严格符合WebKit的校验规则
2. 插入animate元素后手动调用触发方法
3. 补充父容器的样式规则，避免高度坍塌
4. 关闭逻辑复用现有SVG元素修改动画参数，不要销毁重建，避免闪烁

修改后代码 #

JS代码

var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;

const bgSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const bgPoly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animate');

bgSvg.setAttribute('class', 'mobiNav_Poly_Close');
bgSvg.setAttribute('width', width);
bgSvg.setAttribute('height', height);
bgSvg.setAttribute('fill', 'white');
bgSvg.setAttribute('viewBox', `0 0 ${width} ${height}`);
bgPoly.setAttribute('class', 'Poly_Close');
bgPoly.setAttribute('points', `0,${height} ${width},${height} 0,0 ${width},0`);
animate.setAttribute('attributeName', 'points');
animate.setAttribute('dur', '1s');
// 移除属性值内多余空格，严格符合格式要求
animate.setAttribute('keyTimes', '0;1');
animate.setAttribute('keySplines', '.67 .01 .16 1');
animate.setAttribute('calcMode', 'spline');
animate.setAttribute('fill', 'freeze');
// 统一点之间用空格分隔，避免混用分隔符
animate.setAttribute('from', `${width},${height} 0,${height} 0,0 ${width},0`);
animate.setAttribute('to', `${width},${height} ${width},0 0,0 ${width},0`);

bgSvg.appendChild(bgPoly);
bgPoly.appendChild(animate);
document.querySelector('.mobiNav_overlay').appendChild(bgSvg);
// 手动触发动画，兼容WebKit内核
animate.beginElement();

CSS代码

body {
  background-color: black;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.mobiNav_overlay {
  width: 100%;
  /* 用vh替代百分比继承，避免iOS高度计算异常 */
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

关闭逻辑优化示例

// 不销毁原有SVG，直接新增反向动画，避免闪烁
const closeAnimate = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
closeAnimate.setAttribute('attributeName', 'points');
closeAnimate.setAttribute('dur', '1s');
closeAnimate.setAttribute('keyTimes', '0;1');
closeAnimate.setAttribute('keySplines', '.67 .01 .16 1');
closeAnimate.setAttribute('calcMode', 'spline');
closeAnimate.setAttribute('fill', 'freeze');
closeAnimate.setAttribute('from', `${width},${height} ${width},0 0,0 ${width},0`);
closeAnimate.setAttribute('to', `${width},${height} 0,${height} 0,0 ${width},0`);
bgPoly.appendChild(closeAnimate);
closeAnimate.beginElement();
// 动画结束后再移除SVG
closeAnimate.addEventListener('endEvent', () => {
  bgSvg.remove();
});

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