HTML5 SVG 2D Introduction 5 - Méthode de représentation et de définition des couleurs

Auteur：Eve Cole Date de mise à jour：2025-04-11 04:00:03

SVG et Canvas sont les mêmes, les deux utilisent des méthodes de représentation de couleur HTML / CSS standard, et ces couleurs peuvent être utilisées pour les attributs de remplissage et de course.

Il existe essentiellement les moyens suivants de définir les couleurs :

1. Nom de la couleur: utilisez le nom de couleur rouge, bleu, noir ...

2. Valeur RGBA / RGB: C'est également facile à comprendre, par exemple # FF0000, RGBA (255,100,100,0,5).

3. Valeur hexadécimale: une couleur définie en hexadécimal, comme #ffffff.

4. Valeur du gradient: c'est également la même chose que dans la toile, en soutenant deux couleurs de gradient: gradient linéaire et gradient d'anneau. Comme indiqué dans la figure ci-dessous:

5. Remplissage de motif: utilisez un motif personnalisé comme couleur de remplissage.

Les premiers sont très simples, concentrons-nous sur les deux couleurs de remplissage dans les deux suivantes.

Gradient linéaire

Le gradient linéaire peut être utilisé pour définir les gradients linéaires, et chaque composant de couleur de gradient est défini à l'aide de l'élément d'arrêt. Voir l'exemple suivant:

<SVG>

<defs>

</ lineargradient>

</ lineargradient>

# rect1 {rempli: url (# gradient1); }

.stop1 {stop-couleur: rouge; }

.stop2 {stop-couleur: noir; Opacité d'arrêt: 0; }

.stop3 {stop-couleur: bleu; }

]]>

</ style>

</fs>

</svg>

Dans cet exemple, nous devons noter :

1. Les éléments de couleur du gradient doivent être placés dans l'élément Defs;

2. Vous devez définir la valeur d'ID pour l'élément de gradient, sinon, d'autres éléments ne pourront pas utiliser ce dégradé.

3. Les membres de la couleur du gradient sont définis à l'aide de Stop, et leurs propriétés peuvent également être définies à l'aide de CSS; Il prend en charge les attributs tels que la classe et l'ID, qui sont pris en charge par HTML standard. D'autres attributs communs sont les suivants :

Attribut offset : Ceci définit la plage d'action de la couleur du membre, et la valeur de cet attribut est de 0% à 100% (ou 0 à 1); Habituellement, la première couleur est réglée à 0%, et la dernière est définie à 100%.

Attribut Stop-Color : C'est très simple, définissant la couleur de la couleur du membre.

Propriété d'opacité : définit la transparence des couleurs des membres.

Attributs x1, y1, x2, y2 : ces deux points définissent la direction du gradient. Si vous ne l'écrivez pas par défaut, c'est un gradient horizontal. Dans l'exemple ci-dessus, un gradient vertical est également créé.

4. Utilisez des couleurs de gradient, comme indiqué dans l'exemple, attribuez simplement la valeur à remplir ou à caresser sous la forme d'URL (#id).

5. Réutilisation des membres du gradient: Vous pouvez également utiliser XLink: HREF pour faire référence aux membres du gradient défini, de sorte que l'exemple ci-dessus peut également être réécrit comme suit:

</ lineargradient>

Gradient de sonnerie

Utilisez l'élément radialgradient pour définir le gradient d'anneau ou utilisez un arrêt pour définir la couleur du membre. Voir l'exemple:

<SVG>

<defs>

</dadialgradient>

</dadialgradient>

</fs>

</svg>

À partir de l'exemple ci-dessus, à l'exception du nom de l'élément et de certains membres spéciaux, tout le reste est le même que le gradient linéaire, y compris la définition de l'arrêt, doit être placé dans DEFS, il doit être défini sur ID, utilisez l'URL (#ID) pour attribuer des valeurs, etc. Ces membres spéciaux sont les suivants:

Attribut offset : c'est la même chose que la valeur de gradient linéaire, mais la signification est différente. Dans le dégradé de l'anneau, 0% représente le centre du cercle, ce qui est facile à comprendre.

CX, CY, R Attributs: En fait, il est facile à comprendre. L'anneau est progressif. Bien sûr, vous devez définir le centre et le rayon de l'anneau. Vous pouvez comprendre la taille et la position du cercle dans l'exemple ci-dessus.

FX, FY Attribut: définit la position au centre de la couleur (focus), c'est-à-dire les coordonnées au lieu le plus dense de la couleur du gradient. Dans l'exemple ci-dessus, le rougeâtre redest est le centre du cercle, qui est l'effet par défaut; Si vous souhaitez le modifier, vous pouvez définir les valeurs de coordonnées FX, fy.

Cependant, vous devez faire attention aux valeurs de Cx, Cy, R, Fx, Fy ci-dessus. Vous constaterez que ce sont tous des décimales, alors quelles sont les unités?

Cela vous oblige à comprendre d'abord un autre attribut lié: GradientUnits , qui définit les unités de coordonnées utilisées pour définir les couleurs de gradient. Cette propriété dispose de 2 valeurs disponibles: UserspaceOnUse et ObjectBoundingBox.

ObjectBoundingBox est la valeur par défaut. Les coordonnées qu'il utilise sont relatives à la boîte d'enfermement d'objets (le cas où il n'est pas une boîte d'enfermement carrée est plus compliquée, le sauter) et la plage de valeur est de 0 à 1. Par exemple, la valeur de coordonnée de Cx et Cy dans l'exemple ci-dessus (0,25, 0,25). Cela signifie que le centre du cercle est 1/4 du coin supérieur gauche de la boîte de boîtier, et le rayon de 0,25 signifie que le rayon est 1/4 de la longueur de la boîte de l'enceinte carrée de l'objet, comme vous pouvez le voir sur la figure.

UserspaceOnUse signifie que les coordonnées absolues sont utilisées. Lorsque vous utilisez ce paramètre, vous devez vous assurer que la couleur du gradient et le remplissage des objets doivent être conservées dans la même position.

Regardez l'exemple suivant, notez que la valeur par défaut de la propriété GradIentUnits est objectboundingbox:

<SVG>

<defs>

<radialgradient id = "gradient5"

cx = "0,5" cy = "0,5" r = "0,5" fx = "0,25" fy = "0,25">

</dadialgradient>

</fs>

<rect x = "10" y = "10" rx = "15" ry = "15"

fill = "URL (# gradient5)" tram = "noir" troupe-width = "2" />

</svg>

Vous saurez le sens de la mise au point en regardant les rendus.

De plus, il existe des éléments de couleur de gradient et certaines propriétés de transformation, telles que GradientTransform , qui n'est pas le foyer ici, et la transformation sera résumée plus tard.

Un autre attribut possible utilisé est la propriété SpreadMethod , qui définit le comportement que la couleur du gradient devrait prendre lorsqu'il atteint son point final. Cette propriété a 3 valeurs facultatives: pad (par défaut), refléter, répéter. Inutile de dire que Pad est une transition naturelle. Une fois la couleur du gradient terminée, utilisez la dernière couleur de membre pour rendre directement la partie restante de l'objet. L'arbitre fera continuer la couleur du dégradé, mais la couleur du dégradé continuera de rendre en sens inverse, à partir de la dernière couleur à la première couleur; Lorsque le point final de la couleur du gradient est à nouveau atteint, inversez l'ordre, afin que l'objet soit rempli de cette manière. La répétition permettra également à la couleur du dégradé de continuer le rendu, mais ne sera pas inversée, et rendra toujours de la première couleur à la dernière couleur encore et encore. Les rendus sont les suivants:

Regardez un morceau de code qui rend à plusieurs reprises:

<SVG>

<defs>

<id radialgradient = "Gradient"

cx = "0,5" cy = "0,5" r = "0,25" fx = ". 25" fy = ". 25"

spreadMethod = "répéter">

</dadialgradient>

</fs>

<rect x = "50" y = "50" rx = "15" ry = "15"

fill = "url (#gradient)" />

</svg>

Remplissage de texture

Le remplissage de texture est également un moyen populaire de remplissage. Dans SVG, vous pouvez utiliser le modèle pour créer une texture, puis utiliser ce modèle pour remplir d'autres objets. Jetons un coup d'œil directement à l'exemple:

<SVG>

<defs>

</ lineargradient>

</ lineargradient>

</fs>

<defs>

<modèle id = "motif" x = ". 05" y = ". 05">

</pattem>

</fs>

</svg>

L'exemple semble simple, créez un motif à partir d'une couleur dégradé, puis utilisez le motif

Remplissez le rectangle. Remarque ici:

1. L'effet est différent lors du remplissage de ce modèle dans différents navigateurs.

Par exemple, les exemples fonctionnent de la même manière dans Firefix et Chrome. Mais si vous faites la couleur de dégradé

Si le motif est défini dans la même combinaison Defs, Firefox peut toujours rendre normalement.

Cependant, Chrome ne peut pas reconnaître la couleur du gradient, il ne le remplira que du noir par défaut.

2. Le modèle doit également définir l'ID.

3. Le modèle doit également être défini dans les DEF.

4. L'utilisation du motif est également d'attribuer directement l'URL (#ID) pour remplir ou caresser.

Ce qui précède est tous très simples. Concentrons-nous sur la représentation des coordonnées dans l'exemple. Les coordonnées sont plus compliquées en schéma.

Le motif contient deux propriétés connexes: PatternUnits et PatternConTentunits Attributs; Les deux propriétés n'ont toujours que deux valeurs: ObjectBoundingbox et UserspaceOnUse. Le sens de ces deux valeurs a été discuté ci-dessus. Ce qui est facile à confondre ici, c'est que les valeurs par défaut de ces deux propriétés sont différentes, mais lorsque vous comprenez les raisons de le faire, vous constaterez que cela est logique.

1. Attribut PatternUnits

Cette propriété est la même que la propriété GradientUnits du gradient, et la boîte à objet-objet est utilisée par défaut. Les attributs affectés par cet attribut sont x, y, largeur et hauteur. Ces quatre attributs définissent respectivement le point de départ et la largeur du modèle. Ils utilisent tous deux des valeurs relatives, et dans l'exemple, ils veulent remplir les directions horizontales et verticales 4 fois, de sorte que la largeur et la hauteur sont réglées à 0,25.

2. Propriété PatternContenUnits

La valeur par défaut de cette propriété est exactement le contraire, en utilisant USERSPACEUSUSE. Cette propriété décrit le système de coordonnées des formes dessinées dans le motif (telles que RECT, cercle ci-dessus). C'est-à-dire, par défaut, la forme que vous dessinez dans le motif utilise un système de coordonnées différent et la taille / position du motif lui-même. Compte tenu du cas dans l'exemple ci-dessus, nous voulons remplir un rectangle de 200 * 200 et répéter chaque direction 4 fois. Cela signifie que chaque motif est de 50 * 50, donc les deux rectangles et un cercle à l'intérieur du motif sont dessinés dans ce rectangle 50 * 50. De cette façon, nous pouvons comprendre les coordonnées du rectangle et du cercle dans le motif ci-dessus. De plus, afin de centrer le modèle dans cet exemple, il doit être compensé de 10px avant le rendu. Cette valeur est limitée par la propriété PatternUnits, donc par défaut, les valeurs x et y sont: 10/200 = 0,05.

Alors pourquoi le modèle définit-il les valeurs par défaut des deux attributs comme celui-ci?

Ceci est déterminé par l'utilisation de l'utilisateur (discuté dans l'exemple ci-dessus):

Le premier style de modèle : je pense que c'est la plupart de la situation, il est donc traité comme la valeur par défaut: le motif est étiré lorsque le graphique extérieur est mis à l'échelle, et peu importe la taille du carré extérieur, le motif sera toujours rempli 4 fois dans les deux sens. Cependant, les graphiques contenus dans le motif ne seront pas étirés car les carrés remplis à l'extérieur sont à l'échelle. Bien qu'il soit farfelu, comprenez-le.

Le deuxième style de motif : la forme du motif est également étirée lorsque la forme du bord extérieur est mise à l'échelle. Nous pouvons également définir la valeur de la propriété PatternConTentunits sur ObjectBoundingbox pour réaliser cet effet. Par exemple, modifiez la partie du modèle comme suit:

</pattem>

Après modification, lors de la modification de la taille du rectangle rempli, la forme dans le motif sera également étirée. Et après modification, il est changé en coordonnées de l'objet périphérique, de sorte que les coordonnées x et y du motif ne sont plus nécessaires. Le motif sera toujours ajusté en fonction de la forme remplie.

Le troisième style de motif : la forme et la taille du motif sont fixes. Peu importe comment les objets périphériques sont mis à l'échelle, vous pouvez modifier le système de coordonnées en UserspaceOnUse pour réaliser cet effet. Le code est le suivant:

</pattem>

Les modèles typiques de ces 3 sont illustrés dans la figure ci-dessous:

Référence pratique:

Document officiel: http://www.w3.org/tr/svg11/

Index du script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Centre de développement: https://developer.mozilla.org/en/svg

Référence populaire: http://www.chinasvg.com/