在SVG形状图案背景中保持背景图像尺寸

Question

尝试获取背景图片以涵盖SVG形状......

截至目前，我正在尝试使用patterns with width and height set to 100%和patternContentUnits="objectBoundingBox" ...它可以作为SVG形状的背景，但它{{1} }。有没有办法让它distorts the background image a bit背景"cover"

https://codepen.io/Finches/pen/MQGdmO

without distorting the background image?

任何帮助？

Answer 1

在image元素中，将preserveAspectRatio="none"更改为保留宽高比的preserveAspectRatio="xMidYMid slice"或another setting：

https://codepen.io/anon/pen/WzbvZY

我只更改了#diamond3，因为这是我最清楚地看到失真的图像。