Cara mempertahankan rasio aspek gambar di dalam SVG tanpa rasio aspek

Saya memiliki SVG yang berfungsi dengan baik sebagai jalur kliping yang menutupi gambar. Bentuk SVG memiliki melestarikanAspectRatio="none" dan berperilaku sesuai keinginan saya (lebar penuh tetapi mempertahankan tinggi statis).

Masalahnya adalah gambar yang saya kliping meregang dan terjepit bersama dengan SVG sedangkan saya ingin gambar tersebut berperilaku sama seperti gambar latar belakang dengan background-size: cover; (selalu isi SVG, potong jika perlu, tetapi pertahankan rasio aspek).

Apakah mungkin melakukan ini dengan kompatibilitas lintas browser (Chrome terbaru, Firefox, Safari, dan 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="/id#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="/id#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 -->

SCSS:

* {
  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 Di Sini

Catatan: saat ini tidak berfungsi di Firefox atau IE11. Saya akan menghargai bantuan apa pun agar semua ini berfungsi di browser tersebut juga.

Terima kasih.


svg css sass cross-browser
person Chris_Heu    schedule 16.11.2017    source sumber

Jawaban (2)


arrow_upward
0
arrow_downward

Tentang rasio aspek

Anda bisa mengatur svg sebagai gambar latar belakang div. Dan menatanya dengan css; background-size: cover; dan background-position: center bottom; mungkin akan berhasil.

Berikut adalah jawaban dari pertanyaan "mengapa tidak berfungsi di MS-Edge?".

  • Tentukan clipPath Anda dalam elemen <defs>.
  • Elemen defs harus merupakan turunan langsung dari salah satu nenek moyang elemen referensi. Hal ini tidak terjadi pada contoh Anda. Menempatkan elemen defs sebagai turunan dari elemen <svg> selalu berhasil. Sumber: https://www.w3.org/TR/SVG/struct.html#DefsElement
  • Aturan hidup: Buatlah sesederhana mungkin. Artinya tidak menggunakan referensi yang tidak diperlukan. Cukup tunjukkan jalur kliping di dalam elemen <clipPath>. Elemen <defs> akhirnya terlihat seperti ini bagi saya dan merupakan turunan dari elemen <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

alih-alih menggunakan tag, Anda bisa menggunakan properti mask di CSS. Tindakannya sama seperti properti latar belakang.

Saya mencoba yang ini dan menyelesaikan masalahnya. 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