Comment appliquer un dégradé linéaire à un rectangle SVG en utilisant CSS ?

Comment appliquer un dégradé linéaire à un rectangle SVG à l'aide de CSS

L'application d'un dégradé à un élément SVG est une tâche courante dans le développement Web. Dans cet article, nous allons explorer comment utiliser CSS pour appliquer un dégradé linéaire à un rectangle SVG.

Comprendre la syntaxe du dégradé

En CSS, un dégradé linéaire est défini à l'aide de l'image d'arrière-plan propriété. La syntaxe est la suivante :

<code class="css">linear-gradient(direction, color-stop1%, color-stop2%, ..., color-stopN%);</code>

• direction : Spécifie la direction dans laquelle le dégradé s'écoulera. Les valeurs courantes incluent vers le haut, vers le bas, vers la gauche et vers la droite.
• color-stop : Représente un point sur la ligne de dégradé où une couleur spécifique est définie. Elle est exprimée en pourcentage compris entre 0% et 100%. Plusieurs arrêts de couleur peuvent être définis, chacun avec une couleur et une position différentes.

Application du dégradé

Pour appliquer le dégradé à un rectangle SVG, vous pouvez utiliser la propriété fill. Fournissez simplement la valeur Linear-gradient() comme valeur de remplissage. Par exemple :

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: linear-gradient(to right, #F60 5%, #FF6 95%);
}</code>

Définition du dégradé dans le SVG

Dans le document SVG lui-même, vous pouvez définir le dégradé à l'aide de l'attribut élément. Cet élément est généralement placé dans le répertoire section. Par exemple :

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

Dans l'exemple ci-dessus, le dégradé est défini avec deux arrêts de couleur : un à 5% avec la couleur #F60 et l'autre à 95% avec la couleur #FF6. L'attribut id fournit un identifiant unique pour le dégradé, qui permet de le référencer dans le CSS.

Référencer le dégradé en CSS

Dans le CSS, vous pouvez référencer le dégradé défini à l'aide de l'attribut url() :

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}</code>

Cela appliquera le dégradé défini dans la fonction élément au rectangle SVG.

Exemple complet

Voici un exemple complet de la façon d'appliquer un dégradé linéaire à un rectangle SVG :

<code class="svg"><svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="MyGradient">
            <stop offset="5%" stop-color="#F60" />
            <stop offset="95%" stop-color="#FF6" />
        </linearGradient>
    </defs>

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

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
}</code>

Application un dégradé linéaire vers un rectangle SVG à l'aide de CSS est une technique puissante qui peut améliorer l'attrait visuel de vos créations. En utilisant la propriété fill et la valeur Linear-gradient(), vous pouvez créer des dégradés avec différentes couleurs, directions et opacités.

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!