Sommaire partiellement masqué - faites défiler !
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 utiliser le logiciel Inkscape pour vous aider dans l'encodage des dégradés.
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.
Ci-dessous le code que j'ai saisi.
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.
Ci-dessous un document Inkscape :
Sous Inkscape j'ai dessiné 4 formes : un rectangle, un carré, une ellipse et un cercle.
A chaque forme j'ai appliqué un dégradé simple via la boite "fond et contour" : une seule couleur avec passage de l'opacité de 1 à 0 ;
dégradé linéaire simple pour les formes du haut et dégradé radial simple pour les formes du bas.
Le code du document Inkscape amendé :
Cependant le code reste verbeux.
Inkscape utilise dans la définition des dégradés, l'attribut gradientUnits="userSpaceOnUse".
gradientUnits définit le système de coordonnées utilisé pour les attributs x1, y1, x2, y2 (dégradé linéaire)
OU cx,cy r (dégradé radial).
Cet attribut peut prendre deux valeurs objectBoundingBox (valeur par défaut) ou userSpaceOnUse
Vous pouvez supprimer l'attribut gradienUnits (ou utiliser sa valeur par défaut) si
les attributs x1, y1, x2, y2 (pour un degradé linéaire) OU cx, cy, r (pour un dégradé radial) sont absents
OU si ces attributs sont exprimés en pourcentages.
Si vous voulez utiliser le système de coordonnées courant (des pixels), il faut rajouter l'attribut gradientUnits="userSpaceOnUse".
Je peux donc simplifier comme suit les définitions des dégradés :
J'ai supprime l'attribut gradientUnits puisque les coordonnées sont absentes ou exprimées en pourcentages.
Le dégradé "d" est linéaire avec un axe horizontal (puisque l'axe n'est pas précisé).
Le dégradé "c" est linéaire avec un axe diagonal.
Les dégradés "b" et "a" sont radiaux avec pour origine le centre de la forme puisque cx, cy et r ne sont pas précisées.
Il y a dans ce tutoriel SVG plusieurs pages sur ce framework SVG dont une pour les dégradés. Voir sommaire du tuto.
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.
Dans la balise pattern on retrouve l'attribut patternUnits qui comme dans linearGradiant (ou radialGradiant) peut
prendre les valeurs "userSpaceOnUse" ou "objectBoundingBox" (valeur par défaut).
Si les paramètres de répétition du motif sont exprimés en pourcentages, patternUnits="objectBoundingBox" est facultatif.
Si les paramètres de répétition du motif sont exprimés en pixels il faut écrire dans la balise pattern : patternUnits="userSpaceOnUse".
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 paramètres 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.
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 en guie de motif une image 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.
Paramètre de répétition : tous les 100 pixels en largeur et en hauteur.
On définit un deuxième motif qui correspond aussi à une image existante et qui a une taille également de
100 par 100.
Paramètres de répétition : 4 fois en largeur et deux fois en hauteur.
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 du canevas a pour fond le motif identifié "plongeur2" :
<rect ... fill = "url(#plongeur2)" ...
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 200 pixels en largeur et tous les 100 pixels en hauteur.
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.