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

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');
}

<div class="img-container">

  <!--clipping SVG-->
  <svg height="0" width="0">
    <defs>
      <clipPath>

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;
}

<div class="img-container">
  <img class="clipped-img" src="https://picsum.photos/id/1074/800/800">
</div>

<div class="img-container">

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!