Accueil

Traduction

Dessiner avec SVG - sommaire

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

SVG : clonage, motifs, découpes, masques & marqueurs

Pour définir un objet (sans le dessiner) il faut que sa description soit dans la partie DEFS du document SVG.

Dans ce chapitre je vais évoquer les modèles à cloner, les motifs, les découpes, les masques et les marqueurs.
En effet j'ai évoqué les dégradés dans le chapitre précédent et je consacre un chapitre entier aux filtres.

Définir un modèle à cloner et utiliser ce modèle

Nous devons dessiner 4 carrés identiques : 100 par 100 avec une bordure de 5 bleu marine ; seule la couleur de fond change.

Première solution

Extrait du code (canevas de 400 par 400) :

Le code est très redondant et donc maladroit !

Deuxième solution : définir un modèle et le cloner

Extrait du code correspondant :

J'ai utilisé la balise defs pour définir une modèle de forme : un carré de 100 par 100 borduré de bleu marine.
Ce premier carré ne sera pas dessiné puisqu'il est contenu dans DEFS.
Puis j'emploie la balise use pour dupliquer N fois ce modèle via l'attribut href

L'attribut href remplace xlink:href ; ce dernier attribut est désormais obsolète.

Le clonage : une duplication dynamique

Le clonage n'est pas une simple duplication d'un objet.
Si je redéfinis le modèle ; les copies (clones) sont automatiqument modifiées comme vous le constatez ci-dessous.
Il y a donc un lien entre l'original et les copies (les clones).

J'ai modifié la définition de l'objet RECT dans la partie DEFS (suppression contour, coins arrondis).
Les clones sont actualisés !

Clonage : cloner un groupe d'objets

Un modèle à cloner peut être un groupe d'objets.

Le code SVG

Deux parties : définition des modèles à cloner puis les clonages.

La partie DEFS

On définit en guise de modèles deux groupes de formes.
Notez l'emploi de l'élément G pour regrouper les formes.

Clonage des modèles

La balise use dessine des copies fidèles du modèle. On dit que l'on procéde à un clonage.

La balise symbol

Pour définir un modèle à cloner on peut utiliser une autre syntaxe : emploi du conteneur SYMBOL.
Tout objet dessiné dans SYMBOL ne sera pas affiché même s'il n'est pas contenu dans DEFS.

Exemple

Ci-dessous une image de 800 par 600 avec un modèle "homme" et un modèle "femme"

Le code SVG

Là encore il faut distinguer la définition des modèles à cloner et les clonages.

Définition des modèles à cloner

Pour chaque modèle on crée une zone de dessin de 100 par 100 avec l'attribut viewbox.
Les coordonnées des objets constitutifs du modèle sont donc désormais indépendantes du canevas SVG mais liées au viewBox associé à la balise symbol.

Clonage des modèles

Les motifs : la balise pattern

Nous allons voir maintenant que l'on peut remplir un objet avec un motif préalablement défini. Bref produire un fond tel un papier peint.

Un motif est une forme (ou groupe de formes) qui se répète dans toute l'objet cible pour le remplir entièrement.
Un motif peut être aussi une image importée (ou un groupe d'images).
Avant d'utiliser un motif pour remplir une zone du canevas SVG il faut bien entendu le définir.
Pour créer un motif il faut utiliser l'élément PATTERN dans la partie DEFS.

Motif basé sur un groupe de formes

Le code SVG

La définition des motifs

Je définis deux motifs identifiés respectivement motif1 et motif2.
Notez les attributs de la balise pattern : patternUnits, width & height que j'appelle les attributs de répétition.

Ces deux motifs sont pratiquement identiques : une ellipse contenant un cercle.
La seule différence entre les deux motifs c'est au niveau des attributs de répétition :

Pour le premier motif nous avons pour ces trois attributs respectivement les valeurs :
userSpaceOnUse 50 50.
Ce qui veut dire que le motif sera répété tous les 50 pixels dans la zone cible.

Pour le deuxième motif et pour les mêmes attributs nous avons les valeurs :
objectBoundingBox 20% 25%.
Ce qui signifie que le motif sera dupliqué tous les 20% en largeur et 25% en hauteur.
Donc 5 fois en largeur et 4 fois en hauteur.

Le remplissage des formes avec ces motifs

Notez la valeur de l'attribut fill

Motif basé sur une image existante

Un motif peut être une image matricielle ou un groupe d'images !

Exemple

Le code SVG correspondant

Le premier motif est utilisé pour remplir le rectangle haut du canevas et le deuxième motif l'est pour remplir le rectangle bas du canevas.

L'outil découpe : balise ClipPath

On peut souhaiter l'effet d'une image vue à travers un trou de serrure ou une paire de jumelles. Il faut alors effectuer un rognage / découpe / détourtage de l'image via une forme simple ou un groupe de formes.

Exemple 1

Découpe selon une forme simple. Utilisation d’une découpe grâce à la balise clipPath

Le code SVG correspondant

Grâce au conteneur clipPath on définit ici une découpe simple (une ellipse) dans la partie DEFS.
Notez l'attribut clip-path de la balise IMAGE.

Exemple 2 : découpe selon un groupe de formes

La découpe peut être un groupe de formes.

Le code correspondant

Ci-dessous et pour info le code de ce fichier svg :

Deux formes (un cercle et un polygone sont contenus dans la balise clippath.

Exemple 3 : un seul modèle de découpe s'appliquant à plusieurs images

Syntaxe

La balise clipPath a un attribut clipPathUnits qui définit le système de coordonnées.

Deux images rognées avec le même modèle de découpe

Le SVG correspondant

C'est miraculeux ! Je définis une seule découpe que j'applique aux deux images alors qu'elles ont des paramètres géométriques (position et taille) différents.
Le miracle c'est l'attribut clipPathUnits="objectBoundingBox" qui précise que les coordonnées de la forme de découpe sont exprimées en relatif : par rapport aux coordonnées de l'image découpée et non pas par rapport au canevas.

Observez attentivement l'instruction polygon points="0.5 0, 1 0.5, 0.5 1, 0 0.5"
L'attribut points comprend quatre paires de X,Y. Ce qui indique les coordonnées relatives des angles du losange de découpe par rapport à l'image : le milieu du côté haut (x =0.5 et y =0), milieu du côté droit, milieu du côté bas et milieu du côté gauche.

L'outil masque : balise MASK

L'outil "masque" est très proche de l'outil découpe.
Cet outil permet de rogner l'image et en plus pour la partie visible de lui appliquer une certaine transparence.

Exemple

L'image apparait de façon transparente dans l'ellipse.

Le code SVG correspondant

Observez bien la balise IMAGE avec l'attribut mask.

Les marqueurs

L' élément marker est utilisé pour créer des marqueurs qui sont ensuite utilisés pour délimiter les segments d'un chemin.
Les marqueurs définis sont donc ensuite positionnées au niveau des noeuds.
Les marqueurs doivent bien sûr être au préalable définis donc décrits dans la partie DEFS.

Exemple

Définit un rond en guise de marqueur Définit un carré en guise de marqueur Définit une flèche en guise de marqueur Une ligne simple avec marqueurs dessiner un zigzag : notation en relatif

Le code correspondant

Dans la partie DEFS on définit les trois marqueurs.

Notez que les trois marqueurs sont définis dans une zone de 10 par 10.

Le plus simple pour expliquer les trois derniers attributs et de montrer le rendu lorsqu'ils sont absents.

Un code "buggé"

Ci-dessous je vous montre par un contre-exemple l'intérêt des attributs refX, refY & orient
En effet dans ce code "buggé" ces attributs sont absents ! Définit un rond en guise de marqueur Définit un carré en guise de marqueur Définit une flèche en guise de marqueur Une ligne simple avec marqueurs dessiner un zigzag : notation en relatif

Le rendu est très moche !
Les marqueurs "flèche" et "carré" ne sont plus dans l'axe du segment.
Les marqueurs sont décalés par rapport au noeud car les valeurs par défaut de refX & refY sont zéro.

Extrait du code "buggé"

Faites attention aux identifiants des marqueurs !

Conseils pour définir des marqueurs

Si la zone de dessin du marqueur fait W par H pixels alors refX = W/2 et refY = H/2.
Pour les marqueurs autres que les ronds règlez l'attribut orient à "auto".