如何在video标签上实现SVG矩形遮罩？

直接修改SVG的mask部分，把文字换成矩形即可，以下是完整可运行代码：

<video src="你的视频地址.mp4" controls style="width: 100%; height: 100%; object-fit: cover; position: relative;"></video>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80" preserveAspectRatio="xMidYMid slice">
  <defs>
    <mask id="mask" x="0" y="0" width="100%" height="100%">
      <!-- 全屏白色背景：mask中白色区域会让遮罩层正常显示 -->
      <rect x="0" y="0" width="100%" height="100%" fill="white" />
      <!-- 替换文字的矩形：黑色区域会让遮罩层透明，直接透出下方视频 -->
      <!-- 可调整x、y、width、height改变矩形的位置和大小 -->
      <rect x="50" y="15" width="185" height="50" fill="black" />
      <!-- 若要用polygon实现矩形，写法如下（和上方rect效果一致）：
      <polygon points="50 15,50 65,235 65,235 15" fill="black" />
      -->
    </mask>
  </defs>
  <!-- 遮罩层：黑色半透明，经mask处理后仅非矩形区域显示 -->
  <rect x="0" y="0" width="100%" height="100%" fill="black" fill-opacity="0.8" mask="url(#mask)" />
</svg>

<style>
  video {
    display: block;
    width: 100vw;
    height: 100vh;
  }
  svg { 
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    pointer-events: none; /* 让鼠标事件穿透SVG，不影响视频控制按钮操作 */
  }
</style>

关键说明： #

• mask的核心逻辑：白色区域允许遮罩层（黑色半透明矩形）显示，黑色区域会让遮罩层透明，直接透出下方视频内容。
• 若使用polygon绘制矩形，需保证四个顶点坐标按顺时针/逆时针顺序闭合，避免图形显示异常。

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