web-dev-qa-db-fra.com

Dégradé SVG utilisant CSS

J'essaie d'obtenir un dégradé 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 correcte lorsqu'il est affiché dans le navigateur.

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

csssvggradientlinear-gradients
76
Hrishikesh Choudhari

Utilisez simplement dans le CSS tout ce que vous utiliseriez dans un attribut fill. Bien entendu, cela nécessite que vous ayez défini le dégradé linéaire quelque part dans votre 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>
78
Thomas W

Réponse 2019

Avec les nouvelles propriétés CSS, vous pouvez avoir encore plus de flexibilité avec les variables aka custom properties

.shape {
  width:500px;
  height:200px;
}

.shape .gradient-bg {
  fill: url(#header-shape-gradient) #fff;
}

#header-shape-gradient {
  --color-stop: #f12c06;
  --color-bot: #faed34;
}
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" class="shape">
  <defs>
    <linearGradient id="header-shape-gradient" x2="0.35" y2="1">
        <stop offset="0%" stop-color="var(--color-stop)" />
        <stop offset="30%" stop-color="var(--color-stop)" />
        <stop offset="100%" stop-color="var(--color-bot)" />
      </linearGradient>
  </defs>
  <g>
    <polygon class="gradient-bg" points="0,0 100,0 0,66" />
  </g>
</svg>

Définissez simplement une variable nommée pour chaque stop dans un dégradé, puis personnalisez-la à votre guise dans css. Vous pouvez même changer leurs valeurs dynamiquement avec JavaScript, comme:

document.querySelector('#header-shape-gradient').style.setProperty('--color-stop', "#f5f7f9");
10
Maciej Kwas

Voici une solution où vous pouvez ajouter un dégradé et changer ses couleurs en utilisant uniquement du CSS:

// JS is not required for the solution. It's used only for the interactive demo.
const svg = document.querySelector('svg');
document.querySelector('#greenButton').addEventListener('click', () => svg.setAttribute('class', 'green'));
document.querySelector('#redButton').addEventListener('click', () => svg.setAttribute('class', 'red'));
svg.green stop:nth-child(1) {
  stop-color: #60c50b;
}
svg.green stop:nth-child(2) {
  stop-color: #139a26;
}

svg.red stop:nth-child(1) {
  stop-color: #c84f31;
}
svg.red stop:nth-child(2) {
  stop-color: #dA3448;
}
<svg class="green" width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="gradient">
    <stop offset="0%" />
    <stop offset="100%" />
  </linearGradient>
  <rect width="100" height="50" fill="url(#gradient)" />
</svg>

<br/>
<button id="greenButton">Green</button>
<button id="redButton">Red</button>
5
Finesse

S'appuyant sur ce que Finesse a écrit, voici un moyen plus simple de cibler le svg et de modifier son dégradé.

Voici ce que vous devez faire:

  1. Attribuez des classes à chaque arrêt de couleur défini dans l'élément de dégradé.
  2. Ciblez le css et changez la couleur d'arrêt pour chacun de ces arrêts à l'aide de classes simples.
  3. Gagner!

Quelques avantages à utiliser des classes au lieu de :nth-child est que cela ne sera pas affecté si vous réorganisez vos arrêts. En outre, cela clarifie l'intention de chaque classe - vous vous demanderez si vous avez besoin d'une couleur bleue pour le premier enfant ou le second.

Je l'ai testé sur tous les Chrome, Firefox et IE11:

.main-stop {
  stop-color: red;
}
.alt-stop {
  stop-color: green;
}
<svg class="green" width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <linearGradient id="gradient">
    <stop class="main-stop" offset="0%" />
    <stop class="alt-stop" offset="100%" />
  </linearGradient>
  <rect width="100" height="50" fill="url(#gradient)" />
</svg>

Voir un exemple éditable ici: https://jsbin.com/gabuvisuhe/edit?html,css,output

5
kumarharsh