Wie korrigiert man falsch ausgerichtete kreisförmige Ausschnitte mithilfe von Masken in SVG?

Kreisförmige Abschnitte aus einem Bild mit SVG ausschneiden

Ihr aktueller Versuch, mit einem Clip-Pfad einen kreisförmigen Abschnitt aus einem Bild auszuschneiden, wird nicht richtig ausgerichtet. Um dieses Problem zu beheben, untersuchen wir einen anderen Ansatz mit Masken in SVG.

<code class="svg"><svg width="200" height="200">
  <defs>
    <mask id="hole">
      <circle r="100" cx="100" cy="100" fill="white"></circle>
      <circle r="50" cx="180" cy="180" fill="black"></circle>
    </mask>
  </defs>
  <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"></image>
  </pattern>
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)"></rect>
</svg></code>

Dieser Code erstellt ein SVG mit einem auf Rosa eingestellten Hintergrund. Innerhalb des Defs-Elements definieren wir eine Maske namens „hole“. Diese Maske besteht aus zwei Kreisen: einem großen weißen Kreis, der den kreisförmigen Bereich darstellt, den Sie aus dem Bild behalten möchten, und einem kleineren schwarzen Kreis, der den Ausschnitt bestimmt.

Das nächste Element ist ein Muster namens „img“. Dieses Muster gibt das Bild an, das Sie als Füllung für die Form verwenden möchten. Wir stellen die Abmessungen des Musters so ein, dass sie mit der Größe der SVG-Datei übereinstimmen, und verwenden ein Bild von einer URL.

Schließlich erstellen wir ein Rechteck, das den gesamten Raum der SVG-Datei ausfüllt. Die Füllung des Rechtecks ​​ist so eingestellt, dass sie auf das „img“-Muster verweist, und wir wenden die „Loch“-Maske an, um den kreisförmigen Abschnitt auszuschneiden.

Das obige ist der detaillierte Inhalt vonWie korrigiert man falsch ausgerichtete kreisförmige Ausschnitte mithilfe von Masken in SVG?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!