如何用SVG ClipPath实现图像填充含镂空的字母/数字内部？

需求：将图像裁剪到字母/数字（例中为"0"）的内部区域，同时保证响应式布局和文本大小调整的灵活性。当前使用SVG clipPath实现时，图像仅被字母轮廓裁剪，无法保留内部区域，需要解决这个问题。

当前代码 #

CSS #

.svg{
  position: absolute;
  top: 0;
}

img{
  width: 500px;
  clip-path: url(#svgPath);
}

HTML #

<div class="container">
  <img src="https://images.unsplash.com/photo-1711383230426-1de085ab1c89?q=80&w=1936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
  
  <div class='svg'>
    <svg height="300" width="200" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <clipPath id="svgPath">
          <text x="15" y="150" fill="black" font-size="200px" class="blend-text">0</text>
        </clipPath>
      </defs>
    </svg>
  </div>
</div>

解决方案 #

问题核心：SVG文本作为clipPath内容时，默认的路径填充规则会将字母内部的镂空区域（比如"0"的中间）排除在裁剪范围外。只需给<text>元素添加fill-rule="nonzero"属性，即可让字母内部的所有区域都被视为裁剪有效区域。

同时为了优化响应式效果，建议给SVG设置viewBox属性替代固定的width/height，让文本缩放时不会变形；另外将容器设为相对定位，确保SVG和图像的位置对齐。

修改后的代码 #

CSS

.container {
  position: relative;
  width: 500px; /* 可改为100%实现全宽响应式 */
}

.svg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

img{
  width: 100%;
  clip-path: url(#svgPath);
}

HTML

<div class="container">
  <img src="https://images.unsplash.com/photo-1711383230426-1de085ab1c89?q=80&w=1936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
  
  <div class='svg'>
    <svg viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <clipPath id="svgPath">
          <text x="20" y="200" font-size="250px" fill-rule="nonzero">0</text>
        </clipPath>
      </defs>
    </svg>
  </div>
</div>

关键说明 #

• fill-rule="nonzero"：强制SVG使用非零环绕规则计算路径填充区域，确保字母内部的所有闭合区域都被包含在裁剪范围内。
• viewBox：定义SVG的坐标系统，让SVG可以根据容器尺寸自适应缩放，实现响应式布局，无需硬编码文本大小和位置。
• 容器设为position: relative：确保绝对定位的SVG和图像在同一坐标系下，位置对齐准确。

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