如何在保持图像静止时实现clip-path的旋转缩放动画？

要实现固定图片位置，仅让clip-path旋转放大逐步显示图像，核心是把动画作用在clip-path内部的遮罩图形上，而非整个SVG或图片容器。具体修改如下：

步骤1：重构clip-path内部结构 #

把Stage2里的两个路径元素包裹到一个<g>标签中，给这个分组加类名方便控制动画：

<clipPath id="Stage2" width="2328" height="956">
  <g class="clip-shape">
    <path class="Stage2Obj1" d="M5442.2-664.9L2214,173.6c-178.8,46.4-285.9,228.8-239.4,407.6l0,0c46.4,178.8,228.8,285.9,407.6,239.4 L5610.5-17.6L5442.2-664.9z"></path>
    <path class="Stage2Obj2" d="M-1506.4,1827.6l3228-839.5c178.8-46.4,285.9-228.8,239.4-407.6l0,0c-46.4-178.8-228.8-285.9-407.6-239.4 l-3228.1,839.3L-1506.4,1827.6z"></path>
  </g>
</clipPath>

步骤2：添加clip-path专属动画 #

用CSS给遮罩分组写旋转+缩放的动画，同时设置变换原点确保动画围绕中心展开：

/* 定义旋转缩放动画 */
@keyframes clipAnim {
  0% {
    transform: rotate(0deg) scale(0.2);
  }
  100% {
    transform: rotate(360deg) scale(1.2);
  }
}

/* 给遮罩分组应用动画 */
.clip-shape {
  transform-origin: center; /* 确保围绕中心变换 */
  animation: clipAnim 2s ease-in-out forwards;
}

/* 移除原SVG上的transform，避免影响图片位置 */
svg {
  /* 去掉原来的transform: matrix(3, 2, -2, 3, 0, 0); */
}

完整修改后代码 #

<div>
  <svg version="1.1" id="careers_2" x="0px" y="0px" viewBox="0 0 2880 1644" style="enable-background:new 0 0 2880 1644;" xml:space="preserve">
      <defs>
        <rect id="SVGID_1_" width="2854" height="1444"></rect>

      <clipPath id="rectMask">
        <use xlink:href="#SVGID_1_" style="overflow:visible;"></use>
      </clipPath>

      <clipPath id="Stage2" width="2328" height="956">
        <g class="clip-shape">
          <path class="Stage2Obj1" d="M5442.2-664.9L2214,173.6c-178.8,46.4-285.9,228.8-239.4,407.6l0,0c46.4,178.8,228.8,285.9,407.6,239.4 L5610.5-17.6L5442.2-664.9z"></path>
          <path class="Stage2Obj2" d="M-1506.4,1827.6l3228-839.5c178.8-46.4,285.9-228.8,239.4-407.6l0,0c-46.4-178.8-228.8-285.9-407.6-239.4 l-3228.1,839.3L-1506.4,1827.6z"></path>
        </g>
      </clipPath>
      </defs>

      <g style="overflow:visible;clip-path:url(#rectMask);">
        <image style="overflow:visible;" width="2880" height="1458" src="https://www.worldatlas.com/r/w1300/upload/fc/62/4f/shutterstock-1011270001.jpg" transform="matrix(0.9907 0 0 0.9907 0.3906 -2.497783e-02)" clip-path="url(#Stage2)"></image>
      </g>
    </svg>
  </div>

@keyframes clipAnim {
  0% {
    transform: rotate(0deg) scale(0.2);
  }
  100% {
    transform: rotate(360deg) scale(1.2);
  }
}

.clip-shape {
  transform-origin: center;
  animation: clipAnim 2s ease-in-out forwards;
}

原理说明 #

clip-path的遮罩范围由其内部的图形元素决定，动画clip-path内的分组元素，只会改变遮罩的形状、大小和角度，图片本身的位置和变换不受影响——因为我们没有对图片或其容器应用任何变换，仅操作了遮罩层。

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