Heim > Web-Frontend > CSS-Tutorial > Wie ändere ich die Größe eines SVG-Clippfads, um ihn an die Breite des enthaltenden Elements anzupassen?

Wie ändere ich die Größe eines SVG-Clippfads, um ihn an die Breite des enthaltenden Elements anzupassen?

Linda Hamilton
Freigeben: 2024-12-14 19:57:11
Original
803 Leute haben es durchsucht

How to Resize an SVG Clip Path to Match the Containing Element's Width?

Wie ändere ich die Größe des ClipPath-Bereichs von SVG?

Stellen Sie sich das folgende Szenario vor:

.img-container {
  width: 300px;
  height: 300px;
  background-color: lightgreen;  
  overflow: hidden;
}

.clipped-img {
  clip-path: url('#header-clip-svg');
}
Nach dem Login kopieren
<div class="img-container">

  <!--clipping SVG-->
  <svg height="0" width="0">
    <defs>
      <clipPath>
Nach dem Login kopieren

Das Ziel besteht darin, den zu erweitern Schneiden Sie die Abmessungen der Form so zu, dass sie mit der Breite des Grüns übereinstimmen Bereich.

Lösung

Die Verwendung der SVG-Datei als Maske ermöglicht die Kontrolle über deren Größe und Platzierung, ähnlich wie beim Hintergrundbild. Durch Festlegen eines geeigneten Werts für die viewBox können Sie den gewünschten Effekt erzielen:

.img-container {
  width: 300px;
  height: 300px;
  background-color: lightgreen; 
  margin:5px;
}

.clipped-img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  -webkit-mask:url('data:image/svg+xml;utf8, <path data here>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8, <path data here>') center/contain no-repeat;
}
Nach dem Login kopieren
<div class="img-container">
  <img class="clipped-img" src="https://picsum.photos/id/1074/800/800">
</div>

<div class="img-container">
Nach dem Login kopieren

Durch Ändern der Breite des Bildcontainers können Sie die Größe des beschnittenen Bereichs mühelos anpassen.

Das obige ist der detaillierte Inhalt vonWie ändere ich die Größe eines SVG-Clippfads, um ihn an die Breite des enthaltenden Elements anzupassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage