Gradient SVG utilisant CSS

Question

J'essaie d'obtenir un gradient appliqué à un élément SVG rect.

Actuellement, j'utilise l'attribut fill. Dans mon fichier CSS:

rect { 
    cursor: pointer; 
    shape-rendering: crispEdges; 
    fill: #a71a2e; 
} 

Et l'élément rect a la couleur de remplissage correct vu dans le navigateur.

Cependant, j'aimerais savoir si je peux appliquer un dégradé linéaire à cet élément? Il suffit d'utiliser dans le CSS tout ce que vous utiliseriez dans un attribut fill

Answer 1

Bien sûr, cela nécessite que vous ayez défini le dégradé linéaire quelque part dans votre fichier SVG.

Voici un exemple complet:

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

<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>

Answer 2

Voici comment définir un linearGradient sur un élément cible:

$output = '<style type="text/css"> 
    path{fill:url(\''.$_SERVER['REQUEST_URI'].'#MyGradient\')} 
</style> 
<defs> 
    <linearGradient id="MyGradient"> 
     <stop offset="0%" stop-color="#e4e4e3" ></stop> 
     <stop offset="80%" stop-color="#fff" ></stop> 
    </linearGradient> 
</defs>';