Как сохранить соотношение сторон изображения внутри SVG без соотношения сторон

У меня есть SVG, который правильно работает как обтравочный контур, маскирующий изображение. Форма SVG имеет preserveAspectRatio="none" и ведет себя так, как я хочу (полная ширина, но сохраняя статическую высоту).

Проблема в том, что изображение, которое я обрезаю, растягивается и сжимается вместе с SVG, тогда как я хотел бы, чтобы оно вело себя так же, как фоновое изображение с background-size: cover; (всегда заполняя SVG, обрезая при необходимости, но сохраняя соотношение сторон).

Можно ли сделать это с кросс-браузерной совместимостью (последние версии Chrome, Firefox, Safari и Internat Explorer)?

HTML:

<div class="outer-wrapper">
  <div class="svg-wrapper">
    <!-- hidden SVG -->
    <svg class="shadow-svg">
      <!-- create drop shadow -->
      <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
        <feOffset dx="0" dy="0" result="offsetblur"/>
        <feFlood flood-color="rgb(0,0,0)" flood-opacity="0.75"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
          <feMergeNode/>
          <feMergeNode in="SourceGraphic"/>
        </feMerge>
      </filter>
      <!-- create shape-->
      <symbol id="shadow" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
        <defs>
          <polygon id="clipShape" points="0 0 0 260 20 260 20 210 1350 210 1350 260 1370 260 1370 0 0 0" style="filter:url(#dropshadow)"/>
        </defs>
      </symbol>
      <!-- set shape as clipping path -->
      <clipPath id="clipPath">
        <use xlink:href="#clipShape" />
      </clipPath>
    </svg>
    <!-- visible SVG -->
    <svg class="shape-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1370 260" enable-background="new 0 0 1370 260" xml:space="preserve" preserveAspectRatio="none">
      <!-- add drop shadow -->
      <use xlink:href="#shadow" />
      <!-- add clipping path shape -->
      <g transform="matrix(1 0 0 1 0 0)" clip-path="url(#clipPath)" >
        <!-- add image inside clipping path shape -->
        <image width="1370" height="260" xlink:href="https://www.unsplash.it/1370/260" transform="matrix(1 0 0 1 0 0)"></image>
      </g>
    </svg>
  </div><!-- .svg-wrapper -->
  <!-- text block -->
  <div class="header-text">
    <h2>Test Header Placeholder</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit exercitationem quibusdam sed natus blanditiis quia assumenda, magni tenetur veritatis itaque iure explicabo veniam maiores magnam architecto et corporis possimus.</p>    
  </div>
</div><!-- .outer-wrapper -->

СКСС:

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  background: repeating-linear-gradient(-45deg, palegreen, palegreen 3px, lightgreen 3px, lightgreen 40px);
}

.outer-wrapper {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.svg-wrapper {
  width: 96%;
  height: 150px;
  margin: 0 auto;
}

.shadow-svg {
  width: 0;
  height: 0;
  position: absolute;
}

.shape-svg {
  width: 100%;
  height: 150px;
  filter: url(#drop-shadow);
}

.header-text {
  width: 90%;
  margin: -20px auto 0;
  font-family: monaco, courier;
}

CodePen здесь

Примечание: в настоящее время он не работает в Firefox или IE11. Я был бы признателен за любую помощь в том, чтобы все это работало и в этих браузерах.

Спасибо.


svg css sass cross-browser
person Chris_Heu    schedule 16.11.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

О соотношении сторон

Вы можете просто установить svg в качестве фонового изображения div. И стилизуйте его с помощью css; background-size: cover; и background-position: center bottom;, вероятно, помогут.

Вот ответ на вопрос "почему это не работает в MS-Edge?".

  • Определите свой clipPath в элементе <defs>.
  • Элемент defs должен быть прямым дочерним элементом одного из предков ссылочного элемента. В вашем примере это не так. Размещение элемента defs в качестве дочернего элемента элемента <svg> всегда работает. Источник: https://www.w3.org/TR/SVG/struct.html#DefsElement
  • Правило жизни: будь проще, когда можешь. Это означает не использовать ненужные ссылки. Просто покажите обтравочный контур внутри элемента <clipPath>. Элемент <defs> в конечном итоге выглядел для меня так и является дочерним элементом элемента <svg>.

<defs>
  <!-- set shape as clipping path -->
  <clipPath id="clipPath">
    <polygon points="0 0 0 260 20 260 20 210 1350 210 1350 260 1370 260 1370 0 0 0"/>
  </clipPath>
</defs>

person Rob Monhemius    schedule 16.11.2017

arrow_upward
0
arrow_downward

вместо использования тега вы можете использовать свойства маски в CSS. Он действует так же, как свойства фона.

Я попробовал этот и решил проблему. https://clipping-masking.webflow.io/

.masked {
  mask-image: url(domain.com/image.sv ), none;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

person Herosimo Sribiko    schedule 04.08.2020