用圖像填充 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>