Comment ajouter une image d'arrière-plan à un cercle SVG sans remplissage noir ?

Comment ajouter une image d'arrière-plan à une forme de cercle SVG (sans la remplir de noir)

Créer un cercle SVG avec un arrière-plan d'image est possible en utilisant des modèles SVG. Voici comment l'implémenter :

Problème :

Le code SVG suivant tente d'ajouter une image d'arrière-plan à un cercle mais remplit le cercle de noir :

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

Solution :

Pour utiliser un remplissage d'image, les motifs SVG sont employé :

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

Explication :

• Définir un dans l'élément en précisant ses coordonnées et ses dimensions.
• Intégrez l'image à l'aide de la balise élément dans le motif.
• Référencez l'ID du motif à l'aide de l'attribut de remplissage sur le cercle pour appliquer l'image d'arrière-plan.

Exemple :

Ajout d'une image de fond à un cercle avec l'ID "top":

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!