Maison  >  Article  >  interface Web  >  Comment appliquer des dégradés aux éléments SVG à l'aide de CSS ?

Comment appliquer des dégradés aux éléments SVG à l'aide de CSS ?

DDD
DDDoriginal
2024-10-30 07:49:03890parcourir

How to Apply Gradients to SVG Elements Using CSS?

Application de dégradés aux éléments SVG à l'aide de CSS

La mise en œuvre d'un dégradé sur un élément SVG rect nécessite l'utilisation de CSS en conjonction avec les puissantes capacités de dégradé de SVG. L'attribut fill de l'élément rect permet l'application d'un dégradé.

Pour créer un dégradé linéaire, ajoutez la règle CSS suivante à votre feuille de style :

rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}

Maintenant, dans le fichier SVG, définissez le dégradé linéaire en utilisant le paramètre et éléments :

<defs>
    <linearGradient id="MyGradient">
        <stop offset="5%" stop-color="#F60" />
        <stop offset="95%" stop-color="#FF6" />
    </linearGradient>
</defs>

Ici, le dégradé s'étend de #F60 à 5 % à #FF6 à 95 % sur toute la longueur de l'élément. Vous pouvez ajuster les couleurs et les pourcentages de décalage pour personnaliser le dégradé.

Enfin, référencez le dégradé à l'aide de l'attribut fill dans l'élément rect :

<rect width="100" height="50" fill="url(#MyGradient)"/>

Cette approche vous permet d'appliquer de belles et dégradés dynamiques sur vos éléments SVG à l'aide de CSS, améliorant ainsi l'attrait visuel et l'expérience utilisateur de vos applications Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn