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.
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.
Vous pouvez aussi utiliser la librairie Snap SVG pour réaliser des dégradés applicables à des éléments SVG.
Ci-dessous un canevas SVG contenant 4 rectangles. Chaque rectangle rempli avec un dégradé linéaire.
Dans le canevas ci-dessus quatre types de dégradés ayant des axes de dégradé différents ont été définis.
Ensuit 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 !
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 couleurs dans le dégradé.
La balise stop permet de préciser l'une des couleurs du dégradé et comprend trois attributs : offset et stop-color
et stop-opacity. Le dernier attribut est facultatif (valeur par défaut =1).
Quant à l'utilisation d'un dégradé linéaire pour remplir une forme c'est exactement comme l'application d'un motif : via l'attribut fill dans la balise correspondant à la forme.
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é de la couleur olive.
Peut-on remplir un groupe de formes avec un dégradé ?
Oui mais le dégradé s'applique alors à chaque forme et non pas à l'ensemble !
Il faudrait transformer le groupe de formes en un chemin.
Le dégradé se répète au niveau de chacune des deux formes constitutives du groupe constitué du cercle et du rectangle.
C'est un peu gênant ...
Il aurait fallu convertir le groupe de formes en un chemin unique puis appliquer le dégradé au chemin.
Dans le cadre d'une découverte du langage SVG, vous pouvez faire l'impasse sur ce paragraphe un peu difficile.
Lisez plutôt attentivement les découpes.
Nous savons déjà remplir une forme avec une couleur unie (plus ou moins opaque) et avec un dégradé de couleurs.
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 le conteneur pattern et identifiés respectivement motif1 et motif2.
L'attribut ID est obligatoire. Vous allez comprendre pourquoi bientôt.
Ces deux motifs sont pratiquement identiques : un carré de 50 par 50 contenant une ellipse. Cette ellipse contenant elle-même un cercle de couleur "olive".
La seule différence entre les deux motifs est la valeur des attributs patternUnits, width, height.
Ces trois attributs précisent le mode de répétition du motif dans la forme cible.
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.
Attention dès que l'attribut patterUnits a pour valeur objectBoundindBox les valeurs des attributs width et height de la balise pattern doivent être exprimées en pourcentage.
Il faut maintenant utiliser ces deux motifs pour remplir des rectangles.
Le canevas SVG est en effet divisé en deux rectangles.
Le premier rectangle (partie gauche de la zone de dessin) est rempli avec
motif1 : < rect fill = "url(#motif1)" ...
Le deuxième rectangle (partie droite du canevas) est rempli avec motif2 : < rect fill = "url(#motif2)"...
Donc je pense que vous avez compris pourquoi il faut non seulement définir un motif mais aussi l'identifier.
Un motif peut être une image matricielle ou un groupe d'images !
On définit un motif identifié "plongeur1" qui a une taille de 100 par 100. Et à l'intérieur du conteneur pattern on utilise la balise isolée
image pour importer une image matricielle.
On définit un deuxième motif identifié "plongeur2" qui correspond aussi à une image existante et qui a une taille également de
100 par 100
Les deux motifs se distinguent par le mode de répétition du motif dans la zone cible. Voir page précédente !
Premier motif répété tous les 100px en largeur et tous les 100px en hauteur : ...patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"
Deuxième motif répété 4 fois en largeur et 1 fois en hauteur : ...patternUnits="objectBoundingBox" x="0" y="0" width="25%" height="100%"
Il faut maintenant utiliser ces motifs pour remplir deux rectangles.
Un rectangle qui occupe la moitié haute de la zone de dessin a pour fond le motif identifié "plongeur1" :
<rect... fill = "url(#plongeur1)" ... .
Un rectangle qui occupe la moitié basse de la zone de dessin a pour fond le motif identifié "plongeur2" :
<rect ... fill = "url(#plongeur2)" ...
Rappel : on peut exprimer les dimensions d'une forme en pourcentages des dimensions du canevas. C'est le cas ici du rectangle qui sera rempli avec le motif.
On définit un motif identifié couple composé de deux images existantes placées côte à côte (elles pourraient être
l'une en dessous de l'autre).
Comme chaque image fait 100 par 100 le motif fait donc 200 par 100.
On demande que le motif soit répété tous les 200px en largeur et tous les 100px en hauteur :
patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="100"
Nous allons aborder deux nouvelles balises du format SVG : mask et clipath.
On peut souhaiter appliquer au dessin le même effet que si 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 utiliser la fonction découpe.
Grâce au conteneur clipPath on définit ici une découpe simple : une ellipse.
Puis on affiche une image avec cette découpe en utilisant l'attribut clip-path à la balise image
Jolie fille vue au travers d'un trou de serrure.
La découpe peut être un groupe de formes.
Ici il s'agit de l'incorporation dans la page d'un fichier SVG (decoupe.svg)
Le code pour l'insertion de l'image SVG dans la page :
Il faut incorporer l'image vectorielle avec la balise object car le code SVG du fichier contient des liens vers d'autres images.
Quant au code du fichier SVG, il est le suivant (extraits) :
Deux formes (un cercle et un polygone sont contenus dans la balise clippath.