Wie ändere ich die Größe eines Bildes für eine kreisförmige SVG-Maskenanpassung?

Größe eines Bildes ändern, um es an einen kreisförmigen SVG-Pfad anzupassen

Wenn Sie versuchen, mithilfe eines SVG-Pfads einen kreisförmigen Teil aus einem Bild auszuschneiden, ist dies wichtig um eine ordnungsgemäße Ausrichtung zu gewährleisten. Wenn das Bild nicht gut passt, kann es an einer falschen Größe oder Positionierung der SVG-Maske liegen.

Hier ist ein alternativer Ansatz, um das gewünschte Ergebnis zu erzielen:

Enhancement Using eine SVG-Maske:

Diese Methode verwendet eine SVG-Maske, um ein kreisförmiges Loch zu erzeugen, in dem das Bild angezeigt wird:

<code class="svg"><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 mask -->
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg></code>

Erklärung:

• #hole: Dies definiert die SVG-Maske, die zwei Kreise enthält, einen weißen und einen schwarzen. Der weiße Kreis stellt den anzuzeigenden Bereich dar, während der schwarze Kreis eine Maske erstellt, um den Bereich außerhalb des Kreises auszublenden.
• #img: Das SVG-Muster definiert ein Muster mithilfe eines Bildes. Das Attribut „patternUnits="userSpaceOnUse" stellt sicher, dass sich das Muster an die Form anpasst, auf die es angewendet wird.
• Das rect-Element füllt den gesamten SVG-Container mit dem #img-Muster und wendet die #hole-Maske an, um den kreisförmigen Ausschnitt sichtbar zu machen.

Mit diesem verbesserten Ansatz sollte das Bild jetzt richtig in die kreisförmige SVG-Maske passen.

Das obige ist der detaillierte Inhalt vonWie ändere ich die Größe eines Bildes für eine kreisförmige SVG-Maskenanpassung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!