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

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

Patricia Arquette
Patricia Arquetteoriginal
2024-10-30 17:13:02562parcourir

How to Apply Linear Gradients to SVG Rect Elements Using CSS?

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

Dans le but d'améliorer les visuels, les développeurs cherchent souvent à appliquer des dégradés linéaires aux éléments SVG Rect éléments. Cette question approfondit la technique d'utilisation de CSS pour obtenir de tels dégradés.

Approche CSS

Pour appliquer un dégradé linéaire à un élément SVG rect via CSS, exploitez le remplissage comme vous le feriez dans l’attribut fill de tout autre élément. Il est essentiel de définir le dégradé linéaire dans le SVG lui-même.

Considérez cet exemple :

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}</code>
<code class="html"><svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <style type="text/css">
        rect{fill:url(#MyGradient)}
      </style>
      <defs>
        <linearGradient id="MyGradient">
          <stop offset="5%" stop-color="#F60" />
          <stop offset="95%" stop-color="#FF6" />
        </linearGradient>
      </defs>
      
      <rect width="100" height="50"/>
    </svg></code>

Ce code définit un dégradé linéaire dans le fichier et l'attribue comme valeur de remplissage de l'élément élément. En conséquence, le rectangle affichera les teintes dégradées allant de #F60 à #FF6.

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
Article précédent:Quelques nouveautés CSS en 4Article suivant:Quelques nouveautés CSS en 4