SVG изображение - фиксированная высота - сохранить соотношение - срез

Question

У меня есть SVG, который должен иметь фиксированную высоту, поэтому он не очень большой, когда ширина составляет 2000+ пикселей (широкоэкранные ...) Обтравочная маска всегда должна быть видимой, а фоновое изображение должно быть нарезанным, а не растягиваться, я попробовал несколько вещей, но, похоже, ничего не работает.

Вот что у меня сейчас: https://codepen.io/bucky208/pen/OEqbPp

div {
  width: 100%;
}

<div>
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1381.5" preserveAspectRatio="none" style="display: block; position: absolute; width: 100%;height: 400px;">
        <g id="clipgroup">
          <defs>
            <polygon id="mask" points="0,572.1 0,1381.3 1024,1040.5 1024,337.6 0,0"/>
          </defs>
          <clipPath id="mask_1_">
            <use xlink:href="#mask"  style="overflow:visible;"/>
          </clipPath>
          <g style="clip-path:url(#mask_1_);">
              <image style="overflow:visible;" width="331" height="444" id="theimage" xlink:href="https://image.ibb.co/ipbNkJ/56_E0406_E5_C8_EF897.jpg"  transform="matrix(3.1119 0 0 3.1111 -3.0528 -2.604167e-04)"></image>
          </g>
        </g>
    </svg>
  </div>

Нужна ли мне еще одна обертка? Как восстановить соотношение изображения?

С уважением и большое спасибо всем, кто пытается помочь.

Answer 1

Чтобы получить заливку изображения для заполнения контейнера, но сохранить исходное соотношение сторон, вам нужен фильтр в сочетании с определением размеров objectBoundingBox и preserveAspectRatio. Следующий код делает то, что я думаю, что вы хотите:

svg {
  background: red;
}

#svgcont {
  position: absolute;
  width: 100%;
}

<div id="svgcont">
     <svg  x="0" y="0" width="100%" height="800px">

          <defs>
            <filter id="image-fill-nostretch" primitiveUnits="objectBoundingBox">
            <feImage x="0" y="0" width="1" height="1" id="theimage" xlink:href="https://image.ibb.co/ipbNkJ/56_E0406_E5_C8_EF897.jpg" preserveAspectRatio="xMidYMid slice"/>
              <feComposite operator="in" x1="SourceGraphic"/>
            </filter>
            
          <clipPath id="mask_1_" clipPathUnits="objectBoundingBox">
               <polygon id="mask" points="0,0.5 0,1 1,0.75 1,0.25 0,0"/>
          </clipPath>
          </defs>

          <g clip-path="url(#mask_1_)">
              <rect width="100%"height="100%" x="0%" y="0%" filter="url(#image-fill-nostretch)"/>
          </g>
    </svg>
</div>