SVG相机快门路径缩放原点异常问题求助

问题根源 #

你遇到的问题是因为SVG内部的路径默认以SVG视口左上角为基准，CSS的transform-origin对SVG内部元素不生效——SVG有自己独立的坐标系统，得从调整SVG本身的坐标逻辑入手。

具体修改步骤 #

• 调整SVG路径的绘制基准到中心
  你的SVGviewBox是0 0 100 100，中心坐标是50,50。把#shutter路径改成从中心出发绘制快门形状，示例代码：

  <path id="shutter" d="M50,50 L0,0 L100,0 L50,50 L100,100 L0,100 L50,50" />
  

  这样路径的中心和SVG视口中心完全重合。

• 让SVG与目标元素中心对齐
  给承载clip-path的SVG添加CSS，使其尺寸与目标元素一致并居中：

  .shutter-container svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* 避免遮挡目标元素的交互 */
  }
  

• 设置正确的动画缩放基准
  现在给路径添加缩放动画时，就会以中心为原点，示例代码：

  #shutter {
    transform: scale(0);
    transform-origin: 50% 50%;
    animation: shutter-effect 0.5s forwards;
  }
  
  @keyframes shutter-effect {
    to {
      transform: scale(2);
    }
  }
  

核心原理 #

SVG的viewBox定义了整个SVG的坐标范围，将路径的绘制起点移到viewBox中心，再配合CSS让SVG与目标元素中心对齐，相当于把clip-path的缩放基准锚定在了元素中心，彻底解决缩放从左上角开始的问题。

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