SVG中六边形内图片的居中定位问题

Got it, let's tackle this problem. The issue you're running into is two-fold: your SVG patterns aren't matching the aspect ratio of your hexagons, and you're missing the preserveAspectRatio attribute to keep images centered and properly scaled without manual x/y hacks.

Why Your Current Setup Isn't Working #

Your hexagons are regular hexagons with an aspect ratio of ~1.155:1 (width ~310 units, height ~268.4 units), but you're using a 1:1 (100x100) viewBox for your patterns. This stretches the images to fit the square pattern, which then gets stretched again to fit the hexagon's shape. Manual x/y adjustments only shift the stretched image, not fix the core scaling/centering issue.

The Solution #

We'll adjust the pattern settings to match the hexagon's dimensions, and use preserveAspectRatio to ensure images stay centered and maintain their original aspect ratio. Here's how to implement it:

• Match pattern dimensions to hexagons: Set your pattern's width and height to match the hexagon's actual size (~310x268.4 units) and keep patternUnits="userSpaceOnUse" so the pattern aligns directly with the hexagon's coordinate space.
• Add preserveAspectRatio: Use xMidYMid slice to crop the image (fill the hexagon completely, no gaps) or xMidYMid meet to show the entire image (with small gaps if the aspect ratio doesn't match). This attribute handles centering automatically, so you can ditch manual x/y offsets.

Modified SVG Code #

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 820.77 566.4">
  <defs>
    <style>
      .four-hexagon-svg-1,.four-hexagon-svg-2,.four-hexagon-svg-3,.four-hexagon-svg-4{
        stroke:#ff5400;
        stroke-width:5px;
      }
      .four-hexagon-svg-1{ fill:url(#four-image-1); }
      .four-hexagon-svg-2{ fill:url(#four-image-2); }
      .four-hexagon-svg-3{ fill:url(#four-image-3); }
      .four-hexagon-svg-4{ fill:url(#four-image-4); }
    </style>
    <!-- Updated patterns with matching dimensions and preserveAspectRatio -->
    <pattern id="four-image-1" width="310" height="268.4" patternUnits="userSpaceOnUse" preserveAspectRatio="xMidYMid slice">
      <image width="310" height="268.4" xlink:href="https://picsum.photos/id/686/800/800" preserveAspectRatio="xMidYMid slice" />
    </pattern>
    <pattern id="four-image-2" width="310" height="268.4" patternUnits="userSpaceOnUse" preserveAspectRatio="xMidYMid slice">
      <image width="310" height="268.4" xlink:href="https://picsum.photos/id/688/800/800" preserveAspectRatio="xMidYMid slice" />
    </pattern>
    <pattern id="four-image-3" width="310" height="268.4" patternUnits="userSpaceOnUse" preserveAspectRatio="xMidYMid slice">
      <image width="310" height="268.4" xlink:href="https://picsum.photos/id/450/800/800" preserveAspectRatio="xMidYMid slice" />
    </pattern>
    <pattern id="four-image-4" width="310" height="268.4" patternUnits="userSpaceOnUse" preserveAspectRatio="xMidYMid slice">
      <image width="310" height="268.4" xlink:href="https://picsum.photos/id/400/800/800" preserveAspectRatio="xMidYMid slice" />
    </pattern>
  </defs>
  <g>
    <g>
      <path class="four-hexagon-svg-1" d="M489.09,295.5h-155L256.65,429.7l77.48,134.2h155l77.48-134.2Z" />
      <path class="four-hexagon-svg-2" d="M489.09,2.5h-155L256.65,136.7l77.48,134.2h155l77.48-134.2Z" />
      <path class="four-hexagon-svg-3" d="M740.41,148.38h-155L508,282.58l77.48,134.2h155l77.48-134.2Z" />
      <path class="four-hexagon-svg-4" d="M235.33,148.38h-155L2.89,282.58l77.48,134.2h155l77.48-134.2Z" />
    </g>
  </g>
</svg>

Key Notes for Dynamic Loading #

This setup works perfectly for dynamically loaded images because:

• preserveAspectRatio automatically handles any image aspect ratio (portrait, landscape, square)
• The pattern dimensions are fixed to match your hexagons, so all images will scale consistently
• No manual adjustments are needed when swapping out images—just update the xlink:href value

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