我想使用帶有 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>如何讓影像填充整個路徑元素的寬度？
uj5u.com熱心網友回復：
確保路徑與 svg 具有相同的寬度 (100%)。在此示例中，我將 viewBox 屬性添加到<svg>. 我還簡化了您的路徑，以便更容易查看路徑的尺寸。
現在路徑的寬度為 50，當將 viewBox 的寬度設定為 50（值“0 0 50 17”中的“50”）時，路徑將占據 100%。圖案也需要寬度，影像也是如此。您可以看到它們的值都為 50。
要控制 SVG 的寬度，您可以在 上指定 width 屬性的值<svg>。如果未指定寬度，則 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>uj5u.com熱心網友回復：
這可能會對您有所幫助，因為此邏輯將水平拉伸影像并填滿頁面的整個寬度。
<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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/416681.html
標籤：