« Découvrir le SVG/Manipulations avancées » : différence entre les versions
Contenu supprimé Contenu ajouté
Motifs |
|||
Ligne 337 :
/>
</source>
=== Motifs ===
Il est possible de remplir une surface par un motif.
Un motif est un dessin inclus entre les balises d'un élément <code>pattern</code>. Il s'utilise de la même manière qu'un dégradé.
Par exemple, si l'on veut remplir une surface par des disques bleus :
<source lang="xml">
<defs>
<pattern
id="motif"
x="0" y="0" width="0.1" height="0.1"
>
<circle
cx="5" cy="5" r="3"
fill="blue" stroke="none"
/>
</pattern>
</defs>
<rect
x="10%" y="10%" width="80%" height="80%"
fill="url(#motif)" stroke="black" stroke-width="1"
/>
</source>
Les paramètres <code>width</code> et <code>height</code> demandent quelques explications. Par défaut, la valeur <code>1</code> désigne la dimension totale de l'objet à remplir (largeur totale pour <code>width</code>, hauteur totale pour <code>height</code>). En mettant les valeurs <code>0.1</code>, nous indiquons que le motif est répété tous les 0,1 dans l'unité locale, c'est-à-dire tous les 1/10 de la largeur et de la hauteur ; cela affiche donc 10 motif dans le sens de la hauteur et 10 motifs dans le sens de la largeur, soit 100 disque sur la surface.
On peut indiquer des dimensions « classiques » avec l'attribut <code>patternUnits="userSpaceOnUse"</code> : les valeurs indiquées dans les attributs <code>width</code> et <code>height</code> sont alors la largeur et la hauteur du rectangle dans lequel le motif est dessiné, et la surface est ensuite pavée par ces rectangles. Par exemple :
<source lang="xml">
<defs>
<pattern
id="motif"
patternUnits="userSpaceOnUse"
x="7.5" y="7.5" width="15" height="15"
>
<circle
cx="5" cy="5" r="3"
fill="blue" stroke="none"
/>
</pattern>
</defs>
<rect
x="10%" y="10%" width="80%" height="80%"
fill="url(#motif)" stroke="black" stroke-width="1"
/>
</source>
Les motifs s'appliquent également aux contours.
== Métadonnées ==
| |||