SVG中的圖案圖片的cssAssatioRatio，例如css背景圖片封面

Question

我有一個SVG，它是兩個對角放置成一個矩形的三角形。 此矩形是瀏覽器窗口的100％寬度和高度。 我正在嘗試為每個背景圖片填充圖片。 為此，我將圖像放入一個圖案中，並為每個三角形填充了該圖案。 但是，圖案中的圖像不能保持其在調整窗口大小時的比率。 圖像拉伸和變形。 我希望圖像的行為類似於此CSS的工作方式：

background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

這是我到目前為止對svg的代碼：

<svg viewBox="0 0 25 25" preserveAspectRatio="none" width="100%" height="100%">
    <defs>
        <pattern id="pattern3" height="100%" width="100%"
         patternContentUnits="objectBoundingBox" viewBox="0 0 1 1"
         preserveAspectRatio="xMidYMid slice">
            <image height="1" width="1"  preserveAspectRatio="xMidYMid slice" 
              xlink:href="img/1.JPG" />
        </pattern>
    </defs>
    <polyline points="0,0  25,0  0,25"
        fill="url(#pattern3)" id="top"/>
    <polyline points="25,0  25,25  0,25"
        fill="url(#pattern3)"  id="bottom"/>
</svg>

請幫幫我！

Answer 1

您可以通過將根SVG中的preserveAspectRatio屬性更改為其他內容來解決此問題。 例如：

<svg viewBox="0 0 25 25" preserveAspectRatio="xMidYMid slice"
     width="100%" height="100%">

在這里演示