SVG组件图片遮罩后无法100%填充宽度问题求助

你的问题出在遮罩（mask）的坐标系和路径（path）范围不匹配SVG的viewBox，导致遮罩只作用在极小区域，最终看起来图片没填满容器。具体问题和修复方法如下：

核心问题分析 #

• 你的SVG viewBox是0 0 23.25 10，但mask里的path坐标（比如M 15 -16.34、M 50 25）远远超出这个 viewBox 的范围。mask默认的maskContentUnits是userSpaceOnUse，也就是基于SVG的用户坐标系（viewBox定义的范围），所以遮罩实际只在viewBox的小范围内生效，图片被遮罩后只有小部分显示。
• mask元素设置的width="100%"和height="100%"在userSpaceOnUse模式下，对应的是viewBox的尺寸，不是容器的百分比。

修复方案 #

方案1：让遮罩适配容器百分比坐标系 #

把mask的maskContentUnits设为objectBoundingBox，让遮罩坐标基于被遮罩元素（image）的边界盒（0到1的范围），同时修改path坐标适配0-1范围：

<svg
  width="100%"
  height="100%"
  viewBox="0 0 23.25 10"
  style={{ borderRadius: "10px" }}
>
  <defs>
    <!-- 设置遮罩坐标基于容器的0-1范围 -->
    <mask id="mask" maskContentUnits="objectBoundingBox">
      <!-- 按 viewBox 比例将原路径缩放到0-1范围，或直接绘制适配容器的路径 -->
      <path d="M 0.645 0 C 0.568 1.806, 0.86 2.8, -0.72 0.5" fill="white" />
      <path d="M 2.15 2.5 C 0.562 -1.035, -0.222 1.046, 2.15 4.5" fill="white" />
    </mask>
  </defs>
  <image
    href={imgUrl}
    x="0"
    y="0"
    width="100%"
    height="100%"
    mask="url(#mask)"
  />
</svg>

方案2：调整SVG viewBox适配原路径范围 #

如果想保留原path形状，直接调整SVG的viewBox覆盖所有路径坐标，再通过preserveAspectRatio控制缩放：

<svg
  width="100%"
  height="100%"
  <!-- 覆盖原路径的最小/最大坐标，确保遮罩完整显示 -->
  viewBox="-20 -25 70 70"
  preserveAspectRatio="xMidYMid slice"
  style={{ borderRadius: "10px" }}
>
  <defs>
    <mask id="mask" x="0" y="0" width="100%" height="100%">
      <path d="M 15 -16.34 C 13.21 8.06, 20 18, -16.73 -5" fill="white" />
      <path d="M 50 25 C 13.1 -20.35, -5.17 10.46, 50 45" fill="white" />
    </mask>
  </defs>
  <image
    href={imgUrl}
    x="0"
    y="0"
    width="100%"
    height="100%"
    mask="url(#mask)"
  />
</svg>

方案3：缩放路径适配viewBox #

如果不想修改path坐标，给mask内的path添加transform，将路径缩放到viewBox范围内：

<svg
  width="100%"
  height="100%"
  viewBox="0 0 23.25 10"
  style={{ borderRadius: "10px" }}
>
  <defs>
    <mask id="mask" x="0" y="0" width="100%" height="100%">
      <!-- 缩放+平移路径，使其适配viewBox -->
      <path d="M 15 -16.34 C 13.21 8.06, 20 18, -16.73 -5" fill="white" transform="scale(0.3 0.2) translate(20 20)" />
      <path d="M 50 25 C 13.1 -20.35, -5.17 10.46, 50 45" fill="white" transform="scale(0.3 0.2) translate(20 20)" />
    </mask>
  </defs>
  <image
    href={imgUrl}
    x="0"
    y="0"
    width="100%"
    height="100%"
    mask="url(#mask)"
  />
</svg>

关键提示 #

• maskContentUnits="objectBoundingBox"是让遮罩适配容器的常用方式，坐标范围0到1（0对应元素左/上边缘，1对应右/下边缘）。
• 调整viewBox时，可借助SVG编辑器查看路径的边界范围，再设置viewBox的min-x min-y width height参数。

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