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