Wie füge ich einem SVG-Kreis ein Hintergrundbild ohne schwarze Füllung hinzu?

So fügen Sie einer SVG-Kreisform ein Hintergrundbild hinzu (ohne sie schwarz zu füllen)

Das Erstellen eines SVG-Kreises mit einem Bildhintergrund ist möglich mit SVG-Mustern. So implementieren Sie es:

Problem:

Der folgende SVG-Code versucht, einem Kreis ein Hintergrundbild hinzuzufügen, füllt den Kreis jedoch stattdessen mit Schwarz:

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

Lösung:

Um eine Bildfüllung zu verwenden, sind SVG-Muster geeignet beschäftigt:

<svg ...>
  <defs>
    <pattern>

Erklärung:

• Definieren Sie ein Element innerhalb des Tag und geben Sie seine Koordinaten und Abmessungen an.
• Betten Sie das Bild mit der Funktion ein. Element innerhalb des Musters.
• Referenzieren Sie die ID des Musters mithilfe des Füllattributs auf dem Kreis, um das Hintergrundbild anzuwenden.

Beispiel:

Hinzufügen eines Hintergrundbilds zu einem Kreis mit der ID „oben“:

<svg ...>
  <defs>
    <pattern>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie füge ich einem SVG-Kreis ein Hintergrundbild ohne schwarze Füllung hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!