如何居中clipPath标签内的SVG文本以实现视频裁剪效果？

你的代码思路是对的，但有几个细节没处理好，导致裁剪效果可能不生效或者显示异常，下面是修正后的方案：

问题分析 #

1. SVG里的<text>没有设置字体大小、字重等样式，默认文本太小，裁剪区域几乎看不见
2. 文本的x、y坐标设置不合理，导致文本位置偏移，无法形成有效的裁剪范围
3. 视频和SVG没有做布局约束，两者可能错位，裁剪效果失效

修正后的完整代码 #

<!-- 用容器约束视频和SVG的布局，让两者重叠 -->
<div style="position: relative; width: 500px; height: 120px;">
  <video src="./my-video.mp4" loop mute autoplay 
         style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; clip-path: url(#clipText);">
  </video>
  <svg width="100%" height="100%" viewBox="0 0 500 120" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <clipPath id="clipText">
        <!-- 设置文本样式，调整位置到容器中心 -->
        <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle"
              font-size="60px" font-weight="bold" font-family="Arial, sans-serif">
          <tspan x="50%">FUTURE OF THE</tspan>
          <tspan x="50%" dy="70">CITY</tspan>
        </text>
      </clipPath>
    </defs>
    <!-- 可选：显示文本预览，方便调试 -->
    <use href="#clipText" fill="transparent" stroke="#fff" stroke-width="1"/>
  </svg>
</div>

关键修改点 #

• 布局约束：用相对定位的容器包裹视频和SVG，两者都设为绝对定位，确保完全重叠
• 文本样式：给<text>添加font-size、font-weight、font-family，让文本足够大且清晰，形成有效的裁剪区域
• 文本位置：把x设为50%、y设为50%，配合text-anchor="middle"和dominant-baseline="central"让文本在容器中居中
• 视频适配：给视频设置width:100%; height:100%; object-fit:cover;，保证视频内容覆盖整个裁剪区域，不会拉伸变形
• 调试辅助：添加<use>标签可以预览文本轮廓，方便调整位置和样式，不需要时可以删掉

这样修改后，视频就会严格按照文本的形状显示，实现你想要的“视频在文本区域内播放”的效果。

内容的提问来源于stack exchange，提问作者游閔暘