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
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Plutôt qu'une couleur, une forme peut être remplie avec un dégradé ou un motif.
Vous pouvez faire l'impasse sur ce chapitre si vous décidez d'utiliser la librairie Snap SVG pour définir les dégradés, masques, découpes et
motifs.
Les dégradés avec Snap SVG
Les masques,découpes et motifs avec Snap SVG
Il existe deux types de dégradés : dégradé linéaire et dégradé radial.
La syntaxe des dégradés en SVG est disons ... un peu lourde.
Ci-dessous un canevas SVG contenant 4 rectangles. Chaque rectangle est rempli avec un dégradé linéaire.
Dans le canevas ci-dessus quatre types de dégradés linéaires ayant des axes différents ont été définis.
Ensuite chaque dégradé défini est utilisé pour remplir un rectangle.
On déclare un dégradé linéaire grâce au conteneur linearGradient dans lequel on intègre des balises stop.
La balise linearGradiant doit contenir quatre attributs x1 y1 x2 et y2 qui précisent l'axe du dégradé à moins que nous voulions
un dégradé horizontal. Dans ce cas ces quatre attributs sont inutiles.
Ici les valeurs de x1,y1,x2 & y2 sont exprimées en pourcentages. Cette remarque a son importance ...
L'attribut ID est obligatoire pour pouvoir appliquer le dégradé à une forme.
Comme tous les objets réutilisables, linearGradient doit évidemment se trouver dans le conteneur defs.
La balise linearGradiant contient autant de balises stop que de tons (couleurs ou niveau de transparence) dans le dégradé.
La balise stop comprend trois attributs : offset, stop-color et stop-opacity.
Ci-dessous deux formes (un cercle et une ellipse).
Seul le cercle est rempli par un dégradé.
La balise SVG est un élément HTML donc rien n'interdit de lui appliquer en guise de "background" un dégradé CSS.
Extrait de la feuille de style de la page : .radial_css {background :linear-gradient(to bottom, skyblue ,white);}
Par contre j'ai tenté d'appliquer ce même dégradé CSS à l'ellipse (élément SVG) et vous voyez que ça ne marche pas !
Un dégradé radial est défini grâce au conteneur radialGradiant avec un attribut obligatoire : ID.
Comme pour un dégradé linéaire il faut ensuite préciser les différentes tons.
Dans l'exemple je joue sur l'opacité de la couleur. J'ai donc un dégradé monocolore.
Vous pouvez aussi préciser l'origine et l'étendue du dégradé avec les paramètres cx,cy & r.
Par défaut l'origine est le centre de l'objet et l'étendue le plus grand rayon de l'élément.
Nous allons voir maintenant que l'on peut remplir une forme avec un motif préalablement défini. Bref produire un fond tel un papier peint.
Un motif est une forme (ou groupe de formes) contenue dans un rectangle et qui se répète dans toute la zone cible.
Un motif peut être aussi une image matricielle 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.
Dans cette page nous définissons deux motifs (donc dans le conteneur defs) avec la balise pattern et 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.
Le conteneur "pattern" inclut les balises ellipse & circle.
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 veut dire que le motif sera dupliqué tous les 20% en largeur et 25% en hauteur.
Donc 5 fois en largeur et 4 fois en hauteur.
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.
Nous allons aborder deux nouvelles balises du format SVG : mask et clipath.
On peut souhaiter appliquer au dessin le même effet que s'il était vu au travers d'un rideau translucide. Il faut alors utiliser la fonction masque.
Le haut de l'image est masqué. Le bas de l'image est identique à l'original.
Ici on définit avec la balise mask un masque composite : 6 rectangles. Chaque rectangle a une largeur de 500 et une hauteur de 100
et est rempli de blanc avec une opacité croissante (augmentation de 20% à chaque fois).
Ce masque s'applique à une image de 500 par 600 grâce via l'attribut mask.
On peut souhaiter l'effet d'un objet vu à travers un trou de serrure ou une paire de jumelles. Il faut alors effectuer un rognage ou découpe ou détourtage.
Grâce au conteneur clipPath on définit ici une découpe simple : une ellipse.
La balise clipPath a pour attribut clipPathUnits qui définit le système de coordonnées.
Donc dans l'exemple ci-dessus clipPathunits ="userSpaceOnUse" est sous entendu.
La découpe peut être un groupe de formes.
Le document "decoupe.svg" dans un iframe :
Ci-dessous et pour info le code de ce fichier svg :
Deux formes (un cercle et un polygone sont contenus dans la balise clippath.
Si vous voulez exprimer les coordonnées de la découpe de façon relative comme c'est le cas dans l'exemple qui suit, l'attribut clipPathUnits ="objectBoundingBox" est alors obligatoire. La valeur d'attribut précise alors que les coordonnées de polygon points ne sont pas des pixels.