用图像填充 100% 的 SVG 路径

Question

我想使用带有 SVG 的背景图像。

我指的是一个SO 帖子：

我设法使用了图像，但它没有填满 SVG 的整个宽度。 代码如下。

 <svg width="650" height="210" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M650 0v209.89s-84.184 1.355-170.006-5.422c-108.534-8.617-160.944-24.494-230.934-24.397C104.93 180.361 0 201.176 0 201.176V0z" fill="url(#img1)" style="fill:url(#img1);stroke-width:1.10991" /> <defs> <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%"> <image href="https://www.linkpicture.com/q/gal.jpg" x="0" y="0" width="100%" height="100%" /> </pattern> </defs> </svg>

如何让图像填充整个路径元素的宽度？

Answer 1

这可能会对您有所帮助，因为此逻辑将水平拉伸图像并填满页面的整个宽度。

 <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 500 500"> <path d="M650 0v209.89s-84.184 1.355-170.006-5.422c-108.534-8.617-160.944-24.494-230.934-24.397C104.93 180.361 0 201.176 0 201.176V0z" fill="url(#img1)"/> <defs> <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%"> <image href="https://www.linkpicture.com/q/gal.jpg"/> </pattern> </defs> </svg>

Answer 2

确保路径与 svg 具有相同的宽度 (100%)。 在此示例中，我将 viewBox 属性添加到<svg> 。 我还简化了您的路径，以便更容易查看路径的尺寸。

现在路径的宽度为 50，当将 viewBox 的宽度设置为 50（值“0 0 50 17”中的“50”）时，路径将占据 100%。 图案也需要宽度，图像也是如此。 您可以看到它们的值都为 50。

要控制 SVG 的宽度，您可以在<svg>上为 width 属性指定一个值。 如果没有给出宽度，svg 将占用 100% 的可用空间。

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 17"> <path d="M 50 0 V 16 S 46 17 38 17 C 30 17 26 15 15 15 C 7 15 0 16 0 16 V 0 Z" fill="url(#img1)"/> <defs> <pattern id="img1" patternUnits="userSpaceOnUse" width="50" height="17"> <image href="https://www.linkpicture.com/q/gal.jpg" width="50"/> </pattern> </defs> </svg>