javascript - 保存 SVG 中图案图像的纵横比，如 css 背景图像封面

Question

我有一个 SVG，它是两个对 Angular 放置的三 Angular 形以形成一个矩形。这个矩形是浏览器窗口的 100% 宽度和高度。我试图用一个背景图像填充每个。为此，我将图像放入一个图案中，并用该图案填充每个三 Angular 形。但是，图案中的图像不会在调整窗口大小时保持其比例。图像拉伸(stretch)和扭曲。我希望图像的行为类似于此 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%">

Demo here