SVG 图像作为图案 - 全宽 - 保持比例

Question

我想创建这种类型的分隔符：

但我不能让它工作，图像永远不会完全拉伸或变形或者是一个图案......

SVG 形状：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" viewBox="0 0 1024 1379.4" style="enable-background:new 0 0 1024 1379.4;" xml:space="preserve">
<polygon points="0,1 0,341 0,1037.4 0,1377.4 1024,1037.4 1024,341 "/>
</svg>

一个 SVG 模式（试用）：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1379.4" version="1.1" width="100%" height="200" preserveAspectRatio="none">
      <defs>
        <pattern id="img4" patternUnits="userSpaceOnUse" width="100" height="100">
          <image xlink:href="https://images.unsplash.com/photo-1507181179506-598491b53db4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=299b6fae13eb39086f5bb28029c61760&auto=format&fit=crop&w=1778&q=80" x="0" y="0" width="100" height="100" />
        </pattern>
      </defs>
    <polygon points="0,1 0,341 0,1037.4 0,1377.4 1024,1037.4 1024,341" fill="url(#img4)"/>
    </svg>

https://jsfiddle.net/Bucky208/b3jhsem4/

这是与剪辑路径（边缘和 IE 不支持？！），它也延伸到全宽度：

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
       y="0px" viewBox="0 0 1024 1381.5" width="100%" height="800" style="enable-background:new 0 0 1024 1381.5;" xml:space="preserve" preserveAspectRatio="none">
    <style type="text/css">
      .st0{clip-path:url(#SVGID_2_);}
    </style>
    <g>
      <defs>
        <polygon id="SVGID_1_" points="0,572.1 0,1381.3 1024,1040.5 1024,337.6 0,0    "/>
      </defs>
      <clipPath id="SVGID_2_">
        <use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
      </clipPath>
      <g class="st0">
        <defs>
          <rect id="SVGID_3_" x="-3.1" y="0" width="1030" height="1381.3"/>
        </defs>
        <clipPath id="SVGID_4_">
          <use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
        </clipPath>
        <g style="clip-path:url(#SVGID_4_);">

            <image style="overflow:visible;" width="331" height="444" xlink:href="https://images.unsplash.com/photo-1507160634214-89e0baae2457?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9df168bddae101e185e697926806634f&auto=format&fit=crop&w=934&q=80"  transform="matrix(3.1119 0 0 3.1111 -3.0528 -2.604167e-04)">
          </image>
        </g>
      </g>
    </g>
    </svg>

https://jsfiddle.net/Bucky208/3xvh8kn1/1/

目标：

• 100% 宽度
• 图像不变形
• 形状本身的宽度 可能变形（固定高度）

亲切的问候

Answer 1

基本上，您所要做的就是在您的图像上设置适当的preserveAspectRatio。在这种情况下，使用关键字slice。 SVG 的 slice 等同于 HTML 中 background-size CSS 属性的值 cover。

在下面的示例中，我执行以下操作：

1. 使用默认的patternUnits="objectBoundingBox" 保留模式并将width 和height 设置为"1"，以便我们的模式覆盖整个对象。
2. 设置patternContentUnits="objectBoundingBox"并将图像width和height设置为"1"，使图像覆盖整个形状。
3. 将图像设置为我们preserveAspectRatio="xMidYMid slice"，以便将图像按比例放大以覆盖整个对象边界框。

另外，我将图像更改为更容易判断它保持其纵横比的图像。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1379.4" version="1.1" width="100%" height="200">
  <defs>
    <pattern id="img4" patternContentUnits="objectBoundingBox" width="1" height="1">
      <image x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMid slice"
             xlink:href="https://images.unsplash.com/photo-1520658402001-b5960f9a6059?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5670796b33630d3eff4b287840632a59&auto=format&fit=crop&w=1950&q=80"/>
    </pattern>
  </defs>
  <polygon points="0,1 0,341 0,1037.4 0,1377.4 1024,1037.4 1024,341" fill="url(#img4)"/>
</svg>