Dégradé SVG avec CSS

Question

J'essaie d'appliquer un dégradé à un SVG. rect élément.

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

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

Et le rect a la couleur de remplissage correcte lorsqu'il est affiché dans le navigateur.

Cependant, j'aimerais savoir si je peux appliquer un gradient linéaire à cet élément ?

Answer 1

Voici comment définir un gradient linéaire sur un élément cible :

<style type="text/css">
    path{fill:url('#MyGradient')}
</style>
<defs>
    <linearGradient id="MyGradient">
        <stop offset="0%" stop-color="#e4e4e3" ></stop>
        <stop offset="80%" stop-color="#fff" ></stop>
    </linearGradient>
</defs>