Wie fülle ich einen Kreis mit einem PNG-Bild mithilfe von SVG-Mustern?

Verwenden von SVG-Mustern zum Erstellen eines Kreises mit einer PNG-Bildfüllung

In einem SVG-Dokument ist es möglich, Formen mit einem Bildmuster zu füllen. Wenn Sie jedoch versuchen, einen Kreis mit einem Bild zu füllen, indem Sie das Attribut „fill“ wie unten verwenden, kann dies dazu führen, dass der gesamte Kreisbereich mit einer Volltonfarbe gefüllt wird:

<circle ... fill="url('images/word-cloud.png')"/>

Um eine Bildfüllung zu erreichen, SVG-Muster können verwendet werden. Ein Musterelement definiert eine wiederverwendbare Grafik, auf die in der Füllungseigenschaft anderer Elemente verwiesen werden kann. Indem wir ein Muster mit einem Bild als Inhalt definieren, können wir einen Kreis mit der gewünschten Bildfüllung erstellen.

Hier ist ein Beispiel:

<svg width="700" height="660">
  <defs>
    <pattern>

In diesem Code wird ein Muster definiert durch Umhüllen des Element um das Element innerhalb des Element. Das id-Attribut des Musters ist auf „image“ gesetzt. Das Attribut „patternUnits“ gibt an, dass das Muster Benutzerraumeinheiten verwendet, um sicherzustellen, dass das Bild nicht gestreckt oder verzerrt wird.

Im Kreiselement ist das Füllattribut so eingestellt, dass es auf das „Bild“-Muster verweist. Dadurch wird der Kreis mit dem Bild gefüllt, das im Attribut „xlink:href“ des Musters angegeben ist. Element.

Dieser Ansatz ermöglicht eine flexible Steuerung der Bildfüllung, einschließlich Positionierung und Skalierung des Bildes innerhalb des Kreises.

Das obige ist der detaillierte Inhalt vonWie fülle ich einen Kreis mit einem PNG-Bild mithilfe von SVG-Mustern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!