Comment remplir un cercle avec une image PNG à l'aide de motifs SVG ?

Utiliser des motifs SVG pour créer un cercle avec un remplissage d'image PNG

Dans un document SVG, il est possible de remplir des formes avec un motif d'image. Cependant, lorsque vous tentez de remplir un cercle avec une image à l'aide de l'attribut "fill" comme ci-dessous, la totalité de la zone du cercle peut être remplie d'une couleur unie :

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

Pour obtenir un remplissage d'image, Des modèles SVG peuvent être utilisés. Un élément de motif définit un graphique réutilisable qui peut être référencé dans la propriété fill d'autres éléments. En définissant un motif avec une image comme contenu, nous pouvons créer un cercle avec le remplissage d'image souhaité.

Voici un exemple :

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

Dans ce code, un motif est défini par enveloppant le élément autour de l'élément dans l'élément élément. L'attribut id du modèle est défini sur « image ». L'attribut patternUnits spécifie que le motif utilisera les unités de l'espace utilisateur, garantissant que l'image n'est pas étirée ou déformée.

Dans l'élément circle, l'attribut fill est défini pour faire référence au motif « image ». En conséquence, le cercle sera rempli avec l'image spécifiée dans l'attribut "xlink:href" du champ élément.

Cette approche permet un contrôle flexible du remplissage de l'image, y compris le positionnement et la mise à l'échelle de l'image dans le cercle.

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!