Comment appliquer des dégradés aux éléments SVG à l'aide de 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!