如何让SVG动画中图案填充始终居中？求跨浏览器兼容方案

解决方案：固定图案定位到原点 #

核心思路是将填充图案直接绑定到SVG的用户空间（viewbox坐标系），而非路径的填充框，让图案始终以原点为中心，彻底避免跨浏览器的动画兼容问题。

具体修改步骤

1. 调整Pattern的定位与尺寸

   • 将pattern的x和y设为-128（256的一半），width和height设为256，确保图案中心恰好落在原点(0,0)。
   • 保留patternUnits="userSpaceOnUse"，让图案坐标基于SVG全局坐标系，不受路径边界框变化的影响。

2. 移除不必要的动画
   无需再对图案的x/y或transform做动画，图案固定在原点后，路径扩张时会自然露出周围区域，填充始终保持居中。

修改后的完整代码

<svg
  width="1024"
  height="1024"
  viewBox="-512 -512 1024 1024"
  fill="none"
  overflow="hidden"
  xmlns="http://www.w3.org/2000/svg"
  preserveAspectRatio="xMinYMin meet"
>
  <style>
    #cube {
      transform-box: fill-box;
      transform: translate(-50%, -50%);
      z-index: 1;
    }

    #origin,
    #origin_label {
      fill: red;
      stroke: darkred;
      stroke-width: 0;
      font-family: sans-serif;
      font-size: 30px;
    }
  </style>

  <circle id="origin" cx="0" cy="0" r="10" />
  <text id="origin_label" x="15" y="30">(0, 0)</text>

  <use href="#cube" stroke-width="2">
    <animate
      attributeName="stroke"
      dur="6s"
      repeatCount="indefinite"
      values="#FF9AA2;#FFB7B2;#FFDAC1;#E2F0CB;#B5EAD7;#C7CEEA;#FF9AA2"
    />
  </use>

  <defs>
    <!-- EVERYTHING TOGETHER -->
    <g id="cube">
      <use
        href="#cube_outline"
        stroke-linejoin="round"
        stroke-width="16"
        fill="url(#sky_bg)"
      />
    </g>

    <!-- GRADIENT FILL -->
    <pattern
      id="sky_bg"
      x="-128"
      y="-128"
      width="256"
      height="256"
      patternUnits="userSpaceOnUse"
    >
      <rect
        width="256"
        height="256"
        x="0"
        y="0"
        fill="url(#sky)"
      ></rect>
    </pattern>

    <!-- THICK OUTER LINE-->
    <g id="cube_outline">
      <path>
        <animate
          attributeName="d"
          dur="3s"
          calcMode="spline"
          keyTimes="0;0.5;1"
          repeatCount="1"
          fill="freeze"
          keySplines="0.4 0 0.2 1;0.4 0 0.2 1"
          values="M 0 64 L 118 0 L 236 64 L 236 192 L 118 256 L 0 192 Z;
          M 0 0 L 236 0 L 236 0 L 236 256 L 0 256 L 0 256 Z;
          M 0 0 L 1010 0 L 1010 0 L 1010 1010 L 0 1010 L 0 1010 Z"
        />
      </path>
    </g>

    <linearGradient id="sky" gradientTransform="rotate(90)">
      <stop offset="0.5" stop-color="#141417" />
      <stop offset="1" stop-color="#40354a" />
    </linearGradient>
  </defs>
</svg>

替代方案：直接使用全局渐变（无需固定尺寸矩形） #

如果不需要固定256x256的矩形填充，而是希望渐变始终以原点为中心覆盖整个路径，可以简化为：

1. 修改linearGradient的属性：

   <linearGradient id="sky" gradientUnits="userSpaceOnUse" x1="0" y1="-512" x2="0" y2="512">
     <stop offset="0.5" stop-color="#141417" />
     <stop offset="1" stop-color="#40354a" />
   </linearGradient>
   

2. 路径直接填充url(#sky)，移除pattern相关代码。

这种方案更简洁，完全规避pattern的定位问题，跨浏览器兼容性最优。

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