So schneiden Sie kreisförmige Bildabschnitte mithilfe von SVG-Pfaden: Eine umfassende Anleitung

Kreisförmige Bilder mit SVG schneiden

Bei Ihrem Versuch, einen kreisförmigen Teil eines Bildes mithilfe eines SVG-Pfads auszuschneiden, sind Sie auf eine Fehlausrichtung gestoßen. Um das gewünschte Ergebnis zu erzielen, bietet eine alternative Methode mit SVG eine einfachere Lösung.

Hier ist der Code:

<svg width="200" height="200">
  <defs>
    <mask id="hole">
      <circle r="100" cx="100" cy="100" fill="white"/>
      <circle r="50" cx="180" cy="180" fill="black"/>
    </mask>
  <pattern id="img" patternUnits="userSpaceOnUse" width="200" height="200">
    <image  xlink:href="https://picsum.photos/200/200?image=1069" x="0" y="0" width="200" height="200" />
  </pattern>
  </defs>
  <!-- create a rect, fill it with the image and apply the above mask -->
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg>

Bei dieser SVG-Methode wird eine Maske mit einem kreisförmigen Loch und einem Muster erstellt mit dem Bild. Anschließend wird ein Rechteck mit dem Bildmuster gefüllt und mit dem Loch maskiert. Dies führt zu einem kreisförmigen Ausschnitt des Bildes innerhalb des SVG-Containers.

Das obige ist der detaillierte Inhalt vonSo schneiden Sie kreisförmige Bildabschnitte mithilfe von SVG-Pfaden: Eine umfassende Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!