After Effects导出的SVG路径变形动画在iOS浏览器无法显示求助

我在After Effects中制作了圆形平滑变形为方形的动画，仅通过调整path属性实现，用Bodymovin插件导出为SVG格式。动画在Windows和Android端正常运行，但在iOS的Safari、Chrome浏览器中无法显示，求解决方法。

附上原SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" width="200" height="200" viewBox="0 0 200 200" style="width:100%;height:100%">
  <defs>
    <animate repeatCount="indefinite" dur="3s" begin="0s" xlink:href="#_R_G_L_1_G_M" fill="freeze" attributeName="opacity" from="0" to="1" keyTimes="0;0.4722222;0.4722236;1" values="0;0;1;1" keySplines="0 0 0 0;0 0 0 0;0 0 0 0" calcMode="spline" />
    <animate repeatCount="indefinite" dur="3s" begin="0s" xlink:href="#_R_G_L_0_G_D_0_P_0" fill="freeze" attributeName="d" attributeType="XML" from="M106.25 48.75 C106.25,76.67 82.52,99.3 53.25,99.3 C23.98,99.3 0.25,76.67 0.25,48.75 C0.25,20.83 23.98,-1.8 53.25,-1.8 C82.52,-1.8 106.25,20.83 106.25,48.75z " to="M105.75 102 C105.75,102 -1,102.3 -1,102.3 C-1,102.3 0.25,-3.75 0.25,-3.75 C0.25,-3.75 105.5,-3.3 105.5,-3.3 C105.5,-3.3 105.75,102 105.75,102z " keyTimes="0;0.4722222;1" values="M106.25 48.75 C106.25,76.67 82.52,99.3 53.25,99.3 C23.98,99.3 0.25,76.67 0.25,48.75 C0.25,20.83 23.98,-1.8 53.25,-1.8 C82.52,-1.8 106.25,20.83 106.25,48.75z ;M105.75 102 C105.75,102 -1,102.3 -1,102.3 C-1,102.3 0.25,-3.75 0.25,-3.75 C0.25,-3.75 105.5,-3.3 105.5,-3.3 C105.5,-3.3 105.75,102 105.75,102z ;M105.75 102 C105.75,102 -1,102.3 -1,102.3 C-1,102.3 0.25,-3.75 0.25,-3.75 C0.25,-3.75 105.5,-3.3 105.5,-3.3 C105.5,-3.3 105.75,102 105.75,102z " keySplines="0.167 0.167 0.833 0.833;0 0 0 0" calcMode="spline" />
    <animate repeatCount="indefinite" dur="3s" begin="0s" xlink:href="#_R_G_L_0_G_M" fill="freeze" attributeName="opacity" from="1" to="0" keyTimes="0;0.4722222;0.4722222;1" values="1;1;0;0" keySplines="0 0 0 0;0 0 0 0;0 0 0 0" calcMode="spline" />
    <animate attributeType="XML" attributeName="opacity" dur="3s" from="0" to="1" xlink:href="#time_group" />
  </defs>
  <g id="_R_G">
    <g id="_R_G_L_1_G_M">
      <g id="_R_G_L_1_G" transform=" translate(100, 100) translate(-53.25, -53.25)">
        <path id="_R_G_L_1_G_D_0_P_0" fill="#fb9588" fill-opacity="1" fill-rule="nonzero" d=" M0.25 106.25 C0.25,106.25 106.25,106.25 106.25,106.25 C106.25,106.25 106.25,0.25 106.25,0.25 C106.25,0.25 0.25,0.25 0.25,0.25 C0.25,0.25 0.25,106.25 0.25,106.25z " />
      </g>
    </g>
    <g id="_R_G_L_0_G_M">
      <g id="_R_G_L_0_G" transform=" translate(100, 100) translate(-53.25, -48.75)">
        <path id="_R_G_L_0_G_D_0_P_0" fill="#834d4d" fill-opacity="1" fill-rule="nonzero" d=" M106.25 48.75 C106.25,76.67 82.52,99.3 53.25,99.3 C23.98,99.3 0.25,76.67 0.25,48.75 C0.25,20.83 23.98,-1.8 53.25,-1.8 C82.52,-1.8 106.25,20.83 106.25,48.75z " />
      </g>
    </g>
  </g>
  <g id="time_group" />
</svg>

解决方法 #

1. 替换xlink:href为标准href #

SVG2已弃用xlink前缀，iOS WebKit对新语法支持更稳定，将所有xlink:href替换为href，同时移除xmlns:xlink声明。

2. 保证路径变形的节点一致性 #

SVG路径动画要求起始和结束路径的命令数量、类型完全匹配。原动画中圆形路径用4组C命令，方形路径需调整为相同结构，确保每个命令的参数数量一致，避免浏览器解析失败。

3. 简化keyTimes数值 #

iOS对过于精确的小数keyTimes（如0.4722222、0.4722236）可能解析异常，换成近似的简洁数值（如0.47），或调整keyTimes的间隔避免重复值。

4. 移除冗余动画元素 #

time_group的opacity动画无实际作用，直接删除可减少浏览器解析负担。

修改后的SVG代码 #

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" width="200" height="200" viewBox="0 0 200 200" style="width:100%;height:100%">
  <defs>
    <animate repeatCount="indefinite" dur="3s" begin="0s" href="#_R_G_L_1_G_M" fill="freeze" attributeName="opacity" from="0" to="1" keyTimes="0;0.47;0.47;1" values="0;0;1;1" keySplines="0 0 0 0;0 0 0 0;0 0 0 0" calcMode="spline" />
    <animate repeatCount="indefinite" dur="3s" begin="0s" href="#_R_G_L_0_G_D_0_P_0" fill="freeze" attributeName="d" attributeType="XML" 
      from="M106.25 48.75 C106.25,76.67 82.52,99.3 53.25,99.3 C23.98,99.3 0.25,76.67 0.25,48.75 C0.25,20.83 23.98,-1.8 53.25,-1.8 C82.52,-1.8 106.25,20.83 106.25,48.75z"
      to="M105.75 102 C105.75,102 105.75,102 105.75,102 C105.75,102 0.25,102 0.25,102 C0.25,102 0.25,-3.75 0.25,-3.75 C0.25,-3.75 105.75,-3.75 105.75,-3.75z"
      keyTimes="0;0.47;1" 
      values="M106.25 48.75 C106.25,76.67 82.52,99.3 53.25,99.3 C23.98,99.3 0.25,76.67 0.25,48.75 C0.25,20.83 23.98,-1.8 53.25,-1.8 C82.52,-1.8 106.25,20.83 106.25,48.75z;M105.75 102 C105.75,102 105.75,102 105.75,102 C105.75,102 0.25,102 0.25,102 C0.25,102 0.25,-3.75 0.25,-3.75 C0.25,-3.75 105.75,-3.75 105.75,-3.75z;M105.75 102 C105.75,102 105.75,102 105.75,102 C105.75,102 0.25,102 0.25,102 C0.25,102 0.25,-3.75 0.25,-3.75 C0.25,-3.75 105.75,-3.75 105.75,-3.75z"
      keySplines="0.167 0.167 0.833 0.833;0 0 0 0" calcMode="spline" />
    <animate repeatCount="indefinite" dur="3s" begin="0s" href="#_R_G_L_0_G_M" fill="freeze" attributeName="opacity" from="1" to="0" keyTimes="0;0.47;0.47;1" values="1;1;0;0" keySplines="0 0 0 0;0 0 0 0;0 0 0 0" calcMode="spline" />
  </defs>
  <g id="_R_G">
    <g id="_R_G_L_1_G_M">
      <g id="_R_G_L_1_G" transform="translate(100, 100) translate(-53.25, -53.25)">
        <path id="_R_G_L_1_G_D_0_P_0" fill="#fb9588" fill-opacity="1" fill-rule="nonzero" d="M0.25 106.25 C0.25,106.25 106.25,106.25 106.25,106.25 C106.25,106.25 106.25,0.25 106.25,0.25 C106.25,0.25 0.25,0.25 0.25,0.25 C0.25,0.25 0.25,106.25 0.25,106.25z" />
      </g>
    </g>
    <g id="_R_G_L_0_G_M">
      <g id="_R_G_L_0_G" transform="translate(100, 100) translate(-53.25, -48.75)">
        <path id="_R_G_L_0_G_D_0_P_0" fill="#834d4d" fill-opacity="1" fill-rule="nonzero" d="M106.25 48.75 C106.25,76.67 82.52,99.3 53.25,99.3 C23.98,99.3 0.25,76.67 0.25,48.75 C0.25,20.83 23.98,-1.8 53.25,-1.8 C82.52,-1.8 106.25,20.83 106.25,48.75z" />
      </g>
    </g>
  </g>
</svg>

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