Couleur CSS SVG

«Le SVG est l'acronyme de« Graphiques vectoriels évolutifs."Il est utilisé pour définir des graphiques basés sur les vecteurs. C'est un graphique bidimensionnel. Nous pouvons appliquer différentes couleurs à ce SVG. Nous pouvons également modifier la couleur du SVG en passant par la souris en utilisant les propriétés CSS. Le CSS fournit différentes propriétés pour changer la couleur de SVG. Nous utilisons ces propriétés pour colorier le SVG dans CSS. Dans ce tutoriel, nous expliquerons la couleur SVG et ferons quelques exemples ici dans lesquels nous colorisons le SVG en utilisant différentes propriétés de CSS. Regardez l'exemple ci-dessous; Vous apprendrez à colorer le SVG dans CSS."

Exemple 1

Pour commencer à écrire HTML, ouvrez Visual Studio Code et créez un nouveau fichier et choisissez HTML comme langue. Le fichier a été créé, et il ne reste plus qu'à ajouter le «!”Marquez dans ce fichier vide qui est créé ici pour obtenir les balises de base. Après, appuyer sur «Entrée» fait apparaître toutes les balises de base du HTML dans le fichier. Le corps est l'endroit où nous commençons le processus de codage. Nous plaçons un titre et la balise «SVG». Cette balise «SVG» est utilisée ici pour définir le conteneur de l'image SVG. Nous mettons le «cercle» à l'intérieur de la balise «SVG» pour créer un cercle SVG. Puis fermer la balise «svg». Maintenant, nous créons le fichier CSS et commençons le codage dans le fichier CSS pour appliquer la couleur à ce cercle SVG. Nous lions également le fichier CSS à ce fichier HTML actuel en utilisant la balise «lien» dans la «tête."

Voici le code CSS dans lequel nous définissons la «largeur» du «SVG» comme «300px» et la «hauteur» de ce «SVG» est «300px». Nous utilisons ici «un coup» parce que lorsque nous devons ajouter une bordure à ce cercle «SVG». Nous définissons la valeur «trait» comme «rouge.«Nous avons également réglé sa largeur en utilisant la« largeur de course », et nous avons réglé cette« largeur de course »sur« 4px ». Maintenant, nous colorions ce cercle SVG à l'aide de la propriété «remplir» de CSS. Nous utilisons cette propriété «remplir» lorsque nous avons] pour colorer tout graphique SVG. Ici, nous avons le cercle SVG, et nous ajoutons de la couleur à ce cercle SVG, nous utilisons donc la propriété «remplir». Nous définissons cette valeur de propriété «remplir» comme «jaune."

Vous pouvez voir le cercle dans la sortie; La couleur de ce cercle SVG est jaune car nous avons ajouté cette couleur à l'aide de la propriété «remplir» dans CSS, et la bordure de ce cercle SVG est en couleur rouge car nous avons utilisé la propriété «tram» dans le code CSS.

Exemple 2

Nous créons ici deux SVG rectangulaires en plaçant le «div», et à l'intérieur de ce «div», nous avons deux «SVG différents.«Nous utilisons« recul »pour créer un rectangle. Ici, nous utilisons deux recul avec les noms «rect1» et «rect2» à l'intérieur du SVG, puis fermez le «div» ici. Maintenant, nous appliquerons différentes couleurs à ces SVG rectangulaires en utilisant les propriétés CSS.

Nous alignons tous les éléments du «corps» sur le «centre.«Ensuite, nous appliquons la couleur« rouge »sur le cap, et« algérien »que nous utilisons comme« Font-Family."Nous stylissons également cette tête vers" italique.«La« hauteur »du premier SVG« RECT1 »est« 300px », et la« largeur »que nous utilisons ici est« 500px ». Nous «remplissons» ce rectangle avec «jaune» car c'est la forme SVG, nous utilisons donc «Remplissons» ici. Ensuite, nous définissons la même hauteur et la même largeur sur le rectangle SVG suivant et «remplissez» ce rectangle avec «violet."

Il y a deux rectangles SVG dans la sortie. Nous utilisons les propriétés CSS pour colorier ces rectangles SVG. Les deux rectangles sont des SVG.

Exemple 3

Dans ce code, nous créons un polygone SVG, nous utilisons donc la balise «SVG» et créons ici un «polygone» en définissant les points du polygone puis en fermant la balise «SVG».

Nous utilisons la police «algérienne» et la couleur «violet» pour le titre. Nous définissons respectivement le «svg» «largeur» et «hauteur» comme «300px» et «200px», respectivement. Ensuite, nous utilisons la propriété «remplir». Nous définissons ce «remplissage» sur «rose» pour que la couleur du polygone apparaisse «rose.«Nous avons également mis des bordures pour ce polygone, nous utilisons donc« coup »pour donner la couleur de la bordure, que nous avons définie comme« violet.«Nous avons réglé la largeur de cette frontière en utilisant la propriété« largeur de course »et la définissait sur« 5 ». Ensuite, nous utilisons la «règle de remplissage», qui est utilisée pour déterminer la partie intérieure du polygone, et la régler sur «égal."

Ici, vous voyez une étoile qui est aussi appelée polygone. Ce polygone est le polygone SVG, et nous colorisons ce polygone SVG ici dans cet exemple en utilisant la propriété «remplir».

Exemple 4

Nous allons générer trois icônes différentes ici, donc nous utilisons la balise «I» dans ce fichier HTML. Nous donnons différents noms à chaque icône, donc; Nous allons définir une couleur différente pour chaque icône SVG.

Nous définissons d'abord «l'icône», la «largeur» et la «hauteur», et les deux sont définis comme «100px». Nous définissons également ces icônes en une seule ligne, nous utilisons donc la propriété «Affichage» et la définissons sur «Block en ligne.«Maintenant, dans le« webkit-mask », nous donnons« l'URL »de l'image SVG et définissons le« webkit-mask-size »pour« couvrir."De plus, le" Mask-Size "est" Cover "ici. Ensuite, nous allons appliquer des couleurs à ces icônes SVG à l'aide de la propriété «Color de fond». Nous avons défini «rouge» pour la première icône SVG, «rose» comme «couleur d'arrière-plan» pour la deuxième icône SVG et la couleur «jaune» pour la troisième icône SVG.

Les trois icônes SVGS apparaissent dans différentes couleurs car nous définissons ces couleurs dans CSS en appliquant séparément la propriété de couleur arrière-plan à toutes ces icônes.

Exemple 5

Ici, nous utilisons la version «XML», puis donnons le chemin de l'icône SVG ici, puis nous modifierons la couleur de cette icône sur le plan de volants, et cela sera fait dans le code CSS.

Nous définissons la couleur de cette icône en utilisant la propriété «remplir», car c'est l'icône SVG, c'est pourquoi nous utilisons «Fill» ici. Nous le définissons «noir."Cette icône apparaîtra en noir. Nous utilisons également «volant» avec cette «icône» et définissons «remplir» «orange», donc lorsque nous volons la souris sur cette icône SVG, la couleur de cela changera en «orange», car nous avons défini «orange» ici dans le «remplissage» de «planer."Le" Text-Align "se fixe sur" Center ", et le" rembourrage "que nous utilisons ici est" 2EM ".

La première sortie montre avant de planer, et vous pouvez remarquer que la couleur de cette icône SVG apparaît en noir, que nous avons définie dans le code CSS, mais lorsque nous survons sur cette icône SVG, sa couleur change, et vous pouvez le voir dans La sortie suivante.

Dans cette seconde sortie, la couleur de l'icône SVG rend «Orange» parce que nous définissons «Orange» comme «Remplissons» lorsque nous survons sur cette icône SVG dans CSS.

Conclusion

Ce tutoriel a été créé pour vous aider à comprendre les propriétés CSS, ce qui nous permet de colorer le SVG. Ce tutoriel a couvert ce concept en profondeur. Nous avons présenté cinq exemples différents ici dans lesquels nous concevons différents SVG, puis colorions ces SVG, et nous avons changé la couleur de différentes icônes SVGS. Nous avons fourni les sorties de tous ces codes dans ce tutoriel. Nous avons utilisé deux propriétés ici pour appliquer la couleur aux SVG, qui étaient des propriétés «remplir» et «couleur arrière-couleur», et les avons expliquées en détail ici. Après avoir soigneusement suivi ce tutoriel, j'espère que vous pourrez colorer les SVG en utilisant ces propriétés dans CSS.