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%">

Demo here

像SVS中的图案图像的preserveAspectRatio，如css background-image cover

1 个答案: