SVG圆形背景图适配问题：定位与未知尺寸图片适配

原始代码 #

<svg width="450" height="250">
  <defs>
    <pattern id="image" patternUnits="userSpaceOnUse" height="100" width="100">
      <image x="0" y="0" width="100" xlink:href="https://storage.googleapis.com/cbb-image-files/PlayerHeadshots/103536-934915.png"></image>
    </pattern>
  </defs>
  <circle id='top' cx="50" cy="50" r="49" stroke="black" fill="url(#image)"/>
  
  <defs>
    <pattern id="image2" patternUnits="userSpaceOnUse" height="100" width="100">
      <image x="0" y="0" width="100" xlink:href="https://storage.googleapis.com/cbb-image-files/PlayerHeadshots/104201-933650.png"></image>
    </pattern>
  </defs>
  <circle id='top2' cx="175" cy="50" r="49" stroke="black" fill="url(#image2)"/>
  
    <defs>
    <pattern id="image3" patternUnits="userSpaceOnUse" height="100" width="100">
      <image x="0" y="0" width="100" xlink:href="https://storage.googleapis.com/cbb-image-files/PlayerHeadshots/104041-1917730.png"></image>
    </pattern>
  </defs>
  <circle id='top3' cx="300" cy="50" r="49" stroke="black" fill="url(#image3)"/>
</svg>

待解决问题 #

1. 无法自由定位圆形：设置第二、第三个圆形的cx为175、300时图片被截断，改成150、250才正常，但需要保留间距，通过cx/cy自由定位所有圆形，调整image的x/y无效。
2. 未知图片尺寸适配：移除image的height属性、设width等于圆形直径时，第三张竖图底部留空白；设height为100则横图出问题，需要在未知宽高时让所有图片完美适配圆形。

解决方案 #

问题1：修复圆形定位导致的图片截断

问题根源是patternUnits="userSpaceOnUse"——这个属性让图案使用SVG全局坐标系统，图案位置固定，当圆形位置不是图案宽高的整数倍时，就会出现截断。

把所有<pattern>的patternUnits改成objectBoundingBox，同时将图案宽高设为1（对应目标元素的边界框比例），这样图案会自动贴合圆形边界，无论圆形放在哪里都不会截断：

<pattern id="image" patternUnits="objectBoundingBox" height="1" width="1">

问题2：适配未知尺寸的图片

给<image>添加preserveAspectRatio="xMidYMid slice"属性，这个属性会让图片按比例缩放，裁剪超出图案范围的部分并居中显示，不管图片是横版还是竖版，都能填满整个圆形区域。

同时把<image>的宽高设为100%，确保图片覆盖整个图案：

<image x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="图片地址"></image>

修改后的完整代码 #

<svg width="450" height="250">
  <defs>
    <pattern id="image" patternUnits="objectBoundingBox" height="1" width="1">
      <image x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://storage.googleapis.com/cbb-image-files/PlayerHeadshots/103536-934915.png"></image>
    </pattern>
    <pattern id="image2" patternUnits="objectBoundingBox" height="1" width="1">
      <image x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://storage.googleapis.com/cbb-image-files/PlayerHeadshots/104201-933650.png"></image>
    </pattern>
    <pattern id="image3" patternUnits="objectBoundingBox" height="1" width="1">
      <image x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://storage.googleapis.com/cbb-image-files/PlayerHeadshots/104041-1917730.png"></image>
    </pattern>
  </defs>
  <circle id='top' cx="50" cy="50" r="49" stroke="black" fill="url(#image)"/>
  <circle id='top2' cx="175" cy="50" r="49" stroke="black" fill="url(#image2)"/>
  <circle id='top3' cx="300" cy="50" r="49" stroke="black" fill="url(#image3)"/>
</svg>

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