Dégradé SVG

Le dégradé SVG peut être défini comme une transition lisse d'une couleur à une autre. Dans SVG, il y a deux types de dégradés, à savoir : le dégradé linéaire et le dégradé radial

Le dégradé SVG est une méthode de remplissage de forme en utilisant des couleurs de manière inégale. De cette manière, la remplissage ou le contour de la forme peut passer d'une couleur à une autre. Pour certains types de graphiques, cela semble vraiment bien.

Exemple de dégradé

Voici l'aspect du dégradé appliqué à la remplissage et au contour de la forme :

Le premier rectangle a toujours la même couleur de contour, mais avec une dégradé de remplissage de vert clair à vert foncé.
　 　Le deuxième rectangle applique une dégradé à la couleur du contour et à la couleur de remplissage.
　 　Le troisième rectangle a une dégradé appliquée au contour, mais sans remplissage.
　 　Le quatrième rectangle a appliqué une dégradé à la remplissage, mais sans contour.

有两种类型的渐变：

1. Il y a deux types de dégradé :

2. La dégradé radiale

以下各节将介绍这两个方面。

Il y a deux types de dégradé :

Les prochaines sections présenteront ces deux aspects.

Dégradé linéaire

Le dégradé linéaire change uniformément de couleur en ligne droite. Au début de cet article, vous avez déjà vu quelques exemples de dégradé linéaire simples.

Les couleurs peuvent varier verticalement, horizontalement ou suivant le vecteur que vous définissez. Vous pouvez également ne remplir qu'une partie de la forme avec le dégradé, plutôt que toute la forme. Avant de continuer, voici quelques exemples visuels :<linearGradient>défini par l'élément. Voici un exemple :

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<linearGradient　id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="0%"　y2="100%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　<stop　offset="0%"　　　stop-color="#00cc00"　stop-opacity="1"/>
　　　　　　<stop　offset="100%"　stop-color="#006600" stop-opacity="1"/>
　　　　</linearGradient>
　　</defs>
　　<rect x="10" y="10" width="75" height="100" rx="10" ry="10"
　　　　　style="fill:url(#myLinearGradient"1);
　　　　　　　　　　　　stroke: #005000;
　　　　　　　　　　　　stroke-width:　3;"　/></svg>

La première rectangle utilise un dégradé vertical. La deuxième rectangle utilise un dégradé horizontal. La troisième rectangle utilise un dégradé diagonal (s'assombrit vers le coin inférieur droit). La quatrième rectangle est rempli uniquement de la moitié droite du rectangle par le dégradé. Avec le dégradé linéaire SVG, tout cela est possible.<linearGradient>-le dégradé linéaire est utilisé<defs>-Comme vous le voyez,<defs>-element imbriqué dans1element à l'intérieur. La définition du dégradé doit toujours être imbriquée dans element à l'intérieur, donc ils peuvent être référencés dans les images SVG. Dans cet exemple, le dégradé linéaire est défini par l'attribut CSS (fill:url(#myLinearGradient))）dans<rect>son-style

à l'intérieur des<linearGradient>-element de référence.<stop>-Ce<linearGradient>-elements ont deux niveaux imbriquésspreadMethodelements. Le<stop>-elements contrôlent ce que la dégradé applique avant et après (la direction de l'application de la dégradé et

C'est<linearGradient>-attribut). Le

C'est<stop>Vous pouvez les transformer avant de les appliquer à la dégradé (par exemple, faire pivoter). Pour plus de détails, voir

Il n'est pas facile de se souvenir de toutes ces descriptions d'attributs. Cela a créé une image pour expliquer le sens de ces attributs :

Ceci est la définition de dégradé linéaire correspondant à l'image :

　　　　<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<defs>
　　　　　　<linearGradient　id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　　　x2="100%"　y2="0%"
　　　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　　　<stop　offset="10%"　stop-color="#00cc00"　stop-opacity="1"/>
　　　　　　　　<stop　offset="30%"　stop-color="#006600" stop-opacity="1"/>
　　　　　　　　<stop　offset="70%"　stop-color="#cc0000"　stop-opacity="1"/>
　　　　　　　　<stop　offset="90%"　stop-color="#000099"　stop-opacity="1"/>
　　　　　　</linearGradient>
　　　　</defs>
　　　　<rect x="10" y="10" width="500"　height="50" rx="10" ry="10"
　　　　　　　style="fill:url(#myLinearGradient"1);　stroke:　#005000;
　　　　　　　　　　　　　　stroke-width:　3;"　/>
　　　　</svg>

La première couleur de fin est #00cc00, elle commencera à10％ commence à entrer dans le rectangle. CommespreadMethodest définie sur « pad », la première couleur est également remplie dans le rectangleavantLa première couleur de station (0-10％).

de la première couleur de fin10％ la couleur de fin devient la deuxième couleur de fin #006600, atteignant le30％.

de la deuxième couleur de fin30％ devient la troisième couleur de fin #cc0000 (rouge), atteignant le70％.

de la troisième couleur de fin70％ devient la quatrième et dernière couleur de fin #000099（bleu）， jusqu'à90％ de90％ à la partie restante du rectangle, la dernière couleur de fin (#000099）est rempli dans le rectangle, carspreadMethod 　 　Le<linearGradient>Les attributs de l'élément sont définis sur « pad ».

La dégradé radiale

La dégradé radiale est une dégradé où la couleur change de manière circulaire plutôt que linéaire. Voici un exemple d'image :

Comme vous le voyez, la couleur change maintenant de manière circulaire. Les trois derniers rectangles (verts) ne changent que au centre du rayonnement le plus clair. Le premier rectangle vert a une couleur s'étendant du centre du rectangle. Le deuxième rectangle utilise le milieu supérieur du rectangle. Le troisième rectangle est centré en haut à gauche.

La dégradé radiale est définie en utilisant<radialGradient>défini par l'élément. Voici un exemple :

<svg　width="512" height="120">
<defs>
<radialgradient　id="myRadialGradient4"　fx="5%"　fy="5%"　r="65%"　spreadmethod="pad"><stop　offset="0%"　stop-color="#00ee00"　stop-opacity="1></stop>
<stop　offset="100%"　stop-color="#006600" stop-opacity="1></stop></radialgradient></defs>
<rect x="340"　y="10" width="100"　height="100" rx="10" ry="10"　style="fill:url(#myRadialGradient4);　stroke:　#005000;　stroke-width:　3;</rect>
　　　</svg>

Le code SVG défini ici définit le quatrième rectangle visible dans l'exemple ci-dessus. Notez comment<stop>Utilisez l'élément pour définir la couleur comme pour une dégradé linéaire (voir les explications sur la dégradé linéaire).

C'est<radialGradient> 　 　Liste des attributs de l'élément :

Le centre du dégradé radial est le centre de la diffusion de la couleur circulaire. Si vous décrivez le dégradé radial comme un cercle, les marqueurs cx et cy indiquent le centre de ce cercle.

Le point focal du dégradé radial est l'angle de radiation colorée. Si vous envisagez le dégradé radial comme une lampe, le point focal détermine l'angle d'impact des rayons de lumière sur la forme.50％，50％représente directement du haut.5％，5％représente de haut en bas. Le dégradé semble un peu comme une lumière qui éclaire votre forme.

Avant de bien configurer le dégradé, vous devrez probablement d'abord essayer de définir le centre et le point focal du dégradé. Je sais que je fais cela pour créer ces exemples simples.

transformer le dégradé

Vous pouvez utiliser des transformations standardsTransformations SVGfonctionnalité pour transformer le dégradé. De cette manière, vous utilisezgradientTransformpropriétés, que ce soit<linearGradient>et 　 　 <radialGradient>。Ceci est un exemple :

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<linearGradient　id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="0%"　y2="100%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad"gradientTransform="rotate(45)"
　　　　>
　　　　　　<stop　offset="0%"　　　stop-color="#00cc00"　stop-opacity="1"/>
　　　　　　<stop　offset="100%"　stop-color="#006600" stop-opacity="1"/>
　　　　</linearGradient>
　　</defs>
　　<rect x="10" y="10" width="75" height="100" rx="10" ry="10"
　　　　　style="fill:url(#myLinearGradient"1);
　　　　　　　　　　　　stroke: #005000;
　　　　　　　　　　　　stroke-width:　3;"　/></svg>

Dans cet exemple, il est défini avecgradientTransform() 　Dégradé linéaire de l'attribut, ce dégradé tourne45Degré. Habituellement, le dégradé classe les couleurs du haut vers le bas, mais maintenant, grâce à la rotation, il va de l'extrême droite en haut vers le bas à gauche.

Effet d'image après exécution :