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.
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!