Wie kann ich SVG-Masken verwenden, um den Beschneidungsbereich von Bildern in CSS zu erweitern?

Erweitern des Beschneidungsbereichs von SVG-Bildern

In CSS können Sie bestimmte Bereiche eines Bildes mithilfe von Beschneidungspfaden abgrenzen. Wenn der Beschneidungspfad jedoch nicht perfekt mit dem gewünschten Bereich übereinstimmt, wird das Bild möglicherweise abgeschnitten angezeigt.

Um dieses Problem zu beheben, sollten Sie die Verwendung von SVG als Maske anstelle eines Beschneidungspfads in Betracht ziehen. Mit dieser Methode können Sie die Größe und Position der SVG-Datei wie bei einem Hintergrundbild bearbeiten.

So wenden Sie SVG als Maske an:

1. Stellen Sie die richtige ViewBox ein:

   .clipped-img {
     ...
     -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="..."></path></svg>') 
               center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 207 167"><path d="..."></path></svg>') 
               center/contain no-repeat;
   }

   Dadurch wird die Größe der SVG-Datei angepasst und sichergestellt, dass sie mit der des Bildes übereinstimmt Grenzen.

2. Passen Sie die Größe und Objektanpassung des Bildes an:

   .clipped-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

   Diese Eigenschaften stellen sicher, dass das Bild den Beschneidungsbereich ausfüllt und korrekt skaliert wird.

Vorteile von SVG Masken:

• Dynamische Größenänderung und Neupositionierung:Anpassungen können je nach Bildschirmgröße oder Benutzerinteraktion vorgenommen werden.
• Mehrere Elemente maskieren: Eine einzelne SVG-Maske kann zum Formen mehrerer Bilder oder Elemente verwendet werden.
• Behalten Bildqualität:Skalierung führt nicht zu Pixelierung oder Verzerrung wie bei Clippfaden.

Beispiel:

Beachten Sie den HTML-Code:

<div class="img-container">
  <img class="clipped-img" src="image.jpg">
</div>

Um die Größe und Form der Maske anzupassen, ändern Sie einfach die ViewBox in der Maske SVG.

Das obige ist der detaillierte Inhalt vonWie kann ich SVG-Masken verwenden, um den Beschneidungsbereich von Bildern in CSS zu erweitern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!