SVG 图案填充适用于 <rect>，但在 <polygon>

Question

我正在使用包含填充的 SVG，该填充在应用于

<rect>

时可以正确显示，但是当我将相同的图案应用于

<polygon>

时，它会缩小到极小的尺寸。如果我使用纯色，例如 fill="yellow"，多边形将以正确的大小和形状显示，因此我相信问题特定于如何将图案应用于 .

<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" 
pointer-events="none">
<!-- Rectangle filled correctly with the pattern -->
<rect width="512" height="512" fill="url(#pattern0_1011_2713)" />

<!-- Polygon with scaling issue when using the pattern -->
<polygon points="256,0 512,128 256,256 0,128"
       fill="url(#pattern0_1011_2713)"
       style="pointer-events: auto;" />

<defs>
  <pattern id="pattern0_1011_2713" patternContentUnits="objectBoundingBox" width="512" 
    height="512">
    <use xlink:href="#image0_1011_2713" transform="scale(0.00195512)" width="512" 
    height="512" />
  </pattern>
<image id="image0_1011_2713" xlink:href="data:image/png;base64,..." width="512" 
height="512" />
</defs>
</svg>

我尝试过的： 使用纯色：当我在多边形上设置 fill="yellow" 时，它会以正确的形状和大小显示，因此问题似乎特定于图案应用程序。 模式缩放：我在元素上尝试了patternContentUnits =“objectBoundingBox”和transform =“scale（...）”值，但这些更改并没有解决缩放问题。

目标： 我希望图案以填充矩形的方式填充多边形，而无需缩小或移动。我正在尝试使用 React 构建一个卡坦岛类型的游戏，这个 SVG 是针对土地的，但正如你在下面看到的，SVG 本身是 512 x 512，但它的可见区域是我映射出来的多边形，即(0, 128)(128, 128)(512, 128)(128, 0)。这样做的原因是我只希望可见部分启用指针事件

问题： 如何调整 或 设置以确保图案正确填充多边形而不会出现缩放问题？是否有一种特定的方法来使用我可能会忽略的多边形图案？

感谢您的任何见解或解决方案！

Answer 1

你被单位定义绊倒了。我认为这个版本可以满足您的需求。

<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" 
pointer-events="none">
<!-- Rectangle filled correctly with the pattern -->
<rect width="512" height="512" fill="url(#pattern0_1011_2713)" />

<!-- Polygon with scaling issue when using the pattern -->
<polygon transform="translate(0 -50)" points="256,0 512,128 256,256 0,128"
       fill="url(#pattern0_1011_2713)"
       style="pointer-events: auto;" />

<defs>
  <pattern id="pattern0_1011_2713" patternUnits="objectBoundingBox" width="1" height="1">
    <use xlink:href="#image0_1011_2713" x="0" y="0"/>
  </pattern>
  
<image id="image0_1011_2713" xlink:href="https://t4.ftcdn.net/jpg/03/17/25/45/240_F_317254576_lKDALRrvGoBr7gQSa1k4kJBx7O2D15dc.jpg" width="512" height="512" x="0" y="0" />
</defs>
</svg>