如何让图片完整填充SVG Path形状？技术求助

尝试用球员图片填充自定义SVG路径，但当前实现的图片出现重复和偏移问题，代码如下：

<Svg
      xmlns='http://www.w3.org/2000/svg'
      width={182.545}
      style={{}}
      height={221.987}
      {...props}
    >
      <Pattern
        id='c'
        height='100%'
        width='100%'
        patternTransform='matrix(1,0,0,1,0,0)'
        patternContentUnits='objectBoundingBox'
        preserveAspectRatio='none'
        x='0'
        y='0'
      >
        <Image
          height='1'
          width='1'
          preserveAspectRatio='none'
          xlinkHref={'http://46.101.9.156/assets/media/users/blank.png'}
          x='0'
          y='0'
        />
      </Pattern>
      <Path
        d='m142.3 167.829-46.765 10.433a12.946 12.946 0 0 1-11.384 0l-46.765-10.433a24.87 24.87 0 0 1-13.585-22.495V61.343c0-10.424 7.947-18.875 17.749-18.875l43.284-7.523a29.222 29.222 0 0 1 10.018 0l43.283 7.524c9.8 0 17.749 8.451 17.749 18.875v83.99a24.871 24.871 0 0 1-13.584 22.495Z'
        stroke='#623bcc'
        strokeMiterlimit={10}
        strokeWidth={5}
        fill='url(#c)'
      />
    </Svg>

解决方案 #

方案1：使用<clipPath>实现图片裁剪（推荐） #

这种方式直接将图片裁剪为路径形状，逻辑直观，能确保图片完整适配且无重复：

<Svg
  xmlns='http://www.w3.org/2000/svg'
  width={182.545}
  height={221.987}
  {...props}
>
  {/* 定义裁剪用的路径 */}
  <ClipPath id="player-clip">
    <Path
      d='m142.3 167.829-46.765 10.433a12.946 12.946 0 0 1-11.384 0l-46.765-10.433a24.87 24.87 0 0 1-13.585-22.495V61.343c0-10.424 7.947-18.875 17.749-18.875l43.284-7.523a29.222 29.222 0 0 1 10.018 0l43.283 7.524c9.8 0 17.749 8.451 17.749 18.875v83.99a24.871 24.871 0 0 1-13.584 22.495Z'
    />
  </ClipPath>

  {/* 应用裁剪的图片 */}
  <Image
    x={0}
    y={0}
    width={182.545}
    height={221.987}
    preserveAspectRatio="xMidYMid slice" // 居中裁剪填满区域，换成meet则完整显示留边
    xlinkHref='http://46.101.9.156/assets/media/users/blank.png'
    clipPath="url(#player-clip)"
  />

  {/* 单独保留路径描边 */}
  <Path
    d='m142.3 167.829-46.765 10.433a12.946 12.946 0 0 1-11.384 0l-46.765-10.433a24.87 24.87 0 0 1-13.585-22.495V61.343c0-10.424 7.947-18.875 17.749-18.875l43.284-7.523a29.222 29.222 0 0 1 10.018 0l43.283 7.524c9.8 0 17.749 8.451 17.749 18.875v83.99a24.871 24.871 0 0 1-13.584 22.495Z'
    stroke='#623bcc'
    strokeMiterlimit={10}
    strokeWidth={5}
    fill="none"
  />
</Svg>

方案2：修复<Pattern>实现 #

如果坚持用Pattern填充，调整以下参数解决重复和偏移：

<Svg
  xmlns='http://www.w3.org/2000/svg'
  width={182.545}
  height={221.987}
  {...props}
>
  <Pattern
    id='c'
    height={221.987} // 匹配SVG高度
    width={182.545}  // 匹配SVG宽度
    patternTransform='matrix(1,0,0,1,0,0)'
    patternContentUnits='userSpaceOnUse' // 改用用户空间单位，避免比例偏移
    preserveAspectRatio='none'
    x='0'
    y='0'
    patternUnits='userSpaceOnUse' // 确保Pattern尺寸基于SVG空间
  >
    <Image
      height={221.987}
      width={182.545}
      preserveAspectRatio='xMidYMid slice'
      xlinkHref='http://46.101.9.156/assets/media/users/blank.png'
      x='0'
      y='0'
    />
  </Pattern>
  <Path
    d='m142.3 167.829-46.765 10.433a12.946 12.946 0 0 1-11.384 0l-46.765-10.433a24.87 24.87 0 0 1-13.585-22.495V61.343c0-10.424 7.947-18.875 17.749-18.875l43.284-7.523a29.222 29.222 0 0 1 10.018 0l43.283 7.524c9.8 0 17.749 8.451 17.749 18.875v83.99a24.871 24.871 0 0 1-13.584 22.495Z'
    stroke='#623bcc'
    strokeMiterlimit={10}
    strokeWidth={5}
    fill='url(#c)'
  />
</Svg>

关键修复点：

• 把patternContentUnits和patternUnits改为userSpaceOnUse，避免路径边界框的比例转换导致偏移
• Pattern的宽高设置为和SVG一致，确保图片只显示一次不重复
• 图片尺寸匹配Pattern，用preserveAspectRatio控制适配方式

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