Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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.
Nous devons dessiner 4 carrés identiques : 100 par 100 avec une bordure de 5 bleu marine ; seule la couleur de fond change.
Extrait du code (canevas de 400 par 400) :
Le code est très redondant et donc maladroit !
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.
L'attribut href remplace xlink:href ; ce dernier attribut est désormais obsolète.
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
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 !
Un modèle à cloner peut être un groupe d'objets.
Deux parties : définition des modèles à cloner puis les clonages.
On définit en guise de modèles deux groupes de formes.
Notez l'emploi de l'élément G pour regrouper les formes.
La balise use dessine des copies fidèles du modèle. On dit que l'on procéde à un clonage.
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.
Ci-dessous une image de 800 par 600 avec un modèle "homme" et un modèle "femme"
Là encore il faut distinguer la définition des modèles à cloner et les clonages.
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.
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.
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.
Notez la valeur de l'attribut fill
Un motif peut être une image matricielle ou un groupe d'images !
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.
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.
Découpe selon une forme simple.
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.
La découpe peut être un groupe de formes.
Ci-dessous et pour info le code de ce fichier svg :
Deux formes (un cercle et un polygone sont contenus dans la balise clippath.
La balise clipPath a un attribut clipPathUnits qui définit le système de coordonnées.
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" 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.
L'image apparait de façon transparente dans l'ellipse.
Observez bien la balise IMAGE avec l'attribut mask.
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.
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.
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 !
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.
Faites attention aux identifiants 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".