SVG路径切换动画在Safari浏览器中性能低下问题求助

你的问题核心在于Safari对SVG复杂滤镜的硬件加速支持不足，再加上路径d属性的逐帧变形计算，双重开销导致严重卡顿。以下是几个可落地的解决办法：

一、简化SVG滤镜（最快见效） #

你的滤镜包含两次高斯模糊+复杂颜色矩阵/组合操作，在Safari中每帧都要重新计算，是性能瓶颈。可以做如下优化：

1. 用CSS滤镜替代SVG内部滤镜，减少计算量：
   把<g>标签的SVG滤镜引用替换为CSS滤镜，直接模拟原效果：

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="1215"
  height="719"
  viewBox="0 0 1215 719"
  fill="none"
  overflow="visible"
>
  <g style="filter: blur(17px) drop-shadow(0 4px 41.5px rgba(142, 8, 77, 0.89)); opacity: 0.3;">
    <path fill="black">
      <animate
        attributeName="d"
        dur="15s"
        repeatCount="indefinite"
        values="
        M444.67 20.1608C721 62.5 845.564 130.758 848.496 211C802.5 375.484 683.447 373.131 317.503 443.725C-48.4406 514.319 -40.3365 386.351 60.996 343.5C161.498 301 222.997 190.5 48.4993 106C-120.501 31.0001 188.996 -34 444.67 20.1608Z;
        M533.673 100.16C827 286.5 822.85 299 827 340.5C837 440.5 784.944 397.906 419 468.5C53.0563 539.094 133.457 430.241 216 357.5C296 287 201.996 128.5 27.4981 43.9996C-102.004 -14.5005 265.5 -30.5 533.673 100.16Z;
        M444.67 20.1608C721 62.5 845.564 130.758 848.496 211C802.5 375.484 683.447 373.131 317.503 443.725C-48.4406 514.319 -40.3365 386.351 60.996 343.5C161.498 301 222.997 190.5 48.4993 106C-120.501 31.0001 188.996 -34 444.67 20.1608Z"
      />
    </path>
  </g>
</svg>

2. 若必须保留原SVG滤镜，将filterUnits改为objectBoundingBox，缩小滤镜计算的区域范围，降低每帧计算量。

二、用CSS关键帧替代SVG animate #

Safari对CSS动画的优化优于SVG原生animate，可将路径变形转为CSS关键帧：

<style>
  @keyframes path-morph {
    0%, 100% { d: path("M444.67 20.1608C721 62.5 845.564 130.758 848.496 211C802.5 375.484 683.447 373.131 317.503 443.725C-48.4406 514.319 -40.3365 386.351 60.996 343.5C161.498 301 222.997 190.5 48.4993 106C-120.501 31.0001 188.996 -34 444.67 20.1608Z"); }
    50% { d: path("M533.673 100.16C827 286.5 822.85 299 827 340.5C837 440.5 784.944 397.906 419 468.5C53.0563 539.094 133.457 430.241 216 357.5C296 287 201.996 128.5 27.4981 43.9996C-102.004 -14.5005 265.5 -30.5 533.673 100.16Z"); }
  }
  .animated-path {
    animation: path-morph 15s infinite;
    filter: blur(17px) drop-shadow(0 4px 41.5px rgba(142, 8, 77, 0.89));
    opacity: 0.3;
    fill: black;
  }
</style>

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="1215"
  height="719"
  viewBox="0 0 1215 719"
  fill="none"
  overflow="visible"
>
  <path class="animated-path" />
</svg>

三、预渲染关键帧静态元素（最低开发成本） #

若对路径过渡的平滑度要求不高，可直接将三个关键路径做成独立元素，用CSS控制透明度切换：

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="1215"
  height="719"
  viewBox="0 0 1215 719"
  fill="none"
  overflow="visible"
>
  <g style="filter: blur(17px) drop-shadow(0 4px 41.5px rgba(142, 8, 77, 0.89)); opacity: 0.3;">
    <path fill="black">
      <animate attributeName="opacity" values="1;0;1" dur="15s" repeatCount="indefinite" />
    </path>
    <path fill="black" d="M533.673 100.16C827 286.5 822.85 299 827 340.5C837 440.5 784.944 397.906 419 468.5C53.0563 539.094 133.457 430.241 216 357.5C296 287 201.996 128.5 27.4981 43.9996C-102.004 -14.5005 265.5 -30.5 533.673 100.16Z">
      <animate attributeName="opacity" values="0;1;0" dur="15s" repeatCount="indefinite" />
    </path>
  </g>
</svg>

四、Canvas简化实现（适合技术储备不足） #

无需复杂路径插值，预加载三个路径后用requestAnimationFrame切换绘制：

<canvas id="canvas" width="1215" height="719"></canvas>
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const paths = [
    'M444.67 20.1608C721 62.5 845.564 130.758 848.496 211C802.5 375.484 683.447 373.131 317.503 443.725C-48.4406 514.319 -40.3365 386.351 60.996 343.5C161.498 301 222.997 190.5 48.4993 106C-120.501 31.0001 188.996 -34 444.67 20.1608Z',
    'M533.673 100.16C827 286.5 822.85 299 827 340.5C837 440.5 784.944 397.906 419 468.5C53.0563 539.094 133.457 430.241 216 357.5C296 287 201.996 128.5 27.4981 43.9996C-102.004 -14.5005 265.5 -30.5 533.673 100.16Z',
    'M444.67 20.1608C721 62.5 845.564 130.758 848.496 211C802.5 375.484 683.447 373.131 317.503 443.725C-48.4406 514.319 -40.3365 386.351 60.996 343.5C161.498 301 222.997 190.5 48.4993 106C-120.501 31.0001 188.996 -34 444.67 20.1608Z'
  ];
  let startTime = Date.now();
  const duration = 15000;

  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const elapsed = Date.now() - startTime;
    const progress = (elapsed % duration) / duration;
    const currentIdx = progress < 1/3 ? 0 : progress < 2/3 ? 1 : 2;

    ctx.filter = 'blur(17px) drop-shadow(0 4px 41.5px rgba(142, 8, 77, 0.89))';
    ctx.fillStyle = 'rgba(0,0,0,0.3)';
    ctx.beginPath();
    ctx.path(new Path2D(paths[currentIdx]));
    ctx.fill();

    requestAnimationFrame(draw);
  }
  draw();
</script>

以上方案中，方案一和方案二最易实施，能显著提升Safari性能；若追求最低开发成本，方案三的静态元素切换最省心。

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