Gradiente SVG utilizzando CSS

104

Sto cercando di ottenere una sfumatura applicata a un rectelemento SVG .

Attualmente sto usando l' fillattributo. Nel mio file CSS:

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

E l' rectelemento ha il colore di riempimento corretto se visualizzato nel browser.

Tuttavia, vorrei sapere se posso applicare un gradiente lineare a questo elemento?

css  svg  gradient  linear-gradients 
— Hrishikesh Choudhari
fonte

Risposte:

96

Usa semplicemente nel CSS quello che useresti in un fillattributo. Ovviamente, questo richiede che tu abbia definito il gradiente lineare da qualche parte nel tuo SVG.

Ecco un esempio completo:

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>
Espandi lo snippet

— Thomas W
fonte
2
Così ho creato il gradiente in un file separato, e usato fillin questo modo: fill: url(../js/gradient.svg#MyGradient);. È questa la via giusta?
— Hrishikesh Choudhari,
@HrishikeshChoudhari: Sì, è corretto, ma penso che Chrome e anche Safari non supportino elementi di riferimento da altri file. Non sono sicuro di IE9 (non è possibile eseguire il test in questo momento, provalo).
— Thomas W,
53
A chiunque legga questo e chieda "di cosa fill: linear-gradient (...)?" fillrichiede un <paint>che è costruito attorno alla <color>classe CSS2 . In altre parole, questa risposta è attualmente l'unico modo per farlo tramite CSS nel momento in cui scrivo questo commento. Devi aggiungere un linearGradientelemento. Infine, esaminando il w3 Working Draft per SVG2 , sembra che il supporto per linear-gradientla regola css di riempimento non sia presente e potrebbe non rientrare nelle specifiche.
— Arthur Weborg
Come cambiare la direzione in questo caso?
— AGamePlayer
1
@AwQiruiGuo Dai un'occhiata a MDN (in particolare l' gradientTransformattributo)
— Thomas W
34

Risposta 2019

Con le nuovissime proprietà CSS puoi avere ancora più flessibilità con le variabili 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>
Espandi lo snippet

Basta impostare una variabile con nome per ciascuna stopin gradiente e quindi personalizzare come preferisci in CSS. Puoi persino modificare i loro valori dinamicamente con javascript, come:

document.querySelector('#header-shape-gradient').style.setProperty('--color-stop', "#f5f7f9");
— Maciej Kwas
fonte
3
Non supportato in IE.
— aoakeson
3
Le proprietà personalizzate CSS sono qui da molto tempo, se in qualche modo qualcuno non è ancora pronto per usarle, non sarà mai pronto per le modifiche.
— Maciej Kwas
1
@MaciejKwas, ti sbagli. I vecchi browser non rimangono per sempre, quindi le aziende che non sono pronte ora saranno pronte allora. E se qualcuno non è pronto a scartare una parte del suo pubblico, ciò non significa che non sia pronto per i cambiamenti, significa che preferisce sfruttare i cambiamenti in seguito per mantenere un pubblico più ampio.
— Finezza
19
@aoakeson IE è morto. Fine della vita. Anche Edge sta morendo, questa è una risposta del 2019, quindi IE non dovrebbe contare. IE può degradarsi con grazia utilizzando un colore solido.
— Ciprian
5
@aoakeson Sono incredibilmente sorpreso di incontrare questo tipo di risposta nel 2019. Saresti ingenuo come sviluppatore presumere che il supporto SVG in IE a questo livello sarebbe mai supportato, figuriamoci uno sviluppatore in erba su SO che ti dà un , risposta polyfilled per qualcosa di inutilmente necessario se intendi supportare IE.
— James Martin-Davies,
18

Basandosi su ciò che ha scritto Finesse, ecco un modo più semplice per indirizzare lo svg e modificarne il gradiente.

Questo è quello che hai bisogno di fare:

  1. Assegna classi a ciascuna interruzione di colore definita nell'elemento sfumatura.
  2. Scegli come target il CSS e cambia il colore di interruzione per ciascuna di queste fermate utilizzando classi semplici.
  3. Vincere!

Alcuni vantaggi dell'utilizzo delle classi invece di :nth-childè che non sarà influenzato se riordini le fermate. Inoltre, rende chiaro l'intento di ogni classe: ti verrà chiesto se avevi bisogno di un colore blu sul primo bambino o sul secondo.

L'ho testato su tutti i Chrome, Firefox e 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>
Espandi lo snippet

Guarda un esempio modificabile qui: https://jsbin.com/gabuvisuhe/edit?html,css,output

— kumarharsh
fonte
La mancanza è che non sai con certezza quali sono i nomi delle classi di stop e che ordine hanno. In realtà, le soluzioni sono le stesse buone, l'unica differenza sono i selettori CSS.
— Finezza
3
Penso che questa sia la migliore risposta moderna alla domanda dei PO.
— Elementale
9

Ecco una soluzione in cui puoi aggiungere una sfumatura e cambiarne i colori usando solo 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>
Espandi lo snippet

— Finezza
fonte
2

Grazie a tutti, per tutte le vostre risposte precise.

Usando lo svg in un shadow dom, aggiungo i 3 gradienti lineari di cui ho bisogno all'interno dello svg, all'interno di un file. Inserisco la regola di riempimento CSS sul componente web e l'ereditarietà od fill fa il lavoro.

<svg viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <path
    d="m258 0c-45 0-83 38-83 83 0 45 37 83 83 83 45 0 83-39 83-84 0-45-38-82-83-82zm-85 204c-13 0-24 10-24 23v48c0 13 11 23 24 23h23v119h-23c-13 0-24 11-24 24l-0 47c0 13 11 24 24 24h168c13 0 24-11 24-24l0-47c0-13-11-24-24-24h-21v-190c0-13-11-23-24-23h-123z"></path>
</svg>

<svg height="0" width="0">
  <defs>
    <linearGradient id="lgrad-p" gradientTransform="rotate(75)"><stop offset="45%" stop-color="#4169e1"></stop><stop offset="99%" stop-color="#c44764"></stop></linearGradient>
    <linearGradient id="lgrad-s" gradientTransform="rotate(75)"><stop offset="45%" stop-color="#ef3c3a"></stop><stop offset="99%" stop-color="#6d5eb7"></stop></linearGradient>
    <linearGradient id="lgrad-g" gradientTransform="rotate(75)"><stop offset="45%" stop-color="#585f74"></stop><stop offset="99%" stop-color="#b6bbc8"></stop></linearGradient>
  </defs>
</svg>

<div></div>

<style>
  :first-child {
    height:150px;
    width:150px;
    fill:url(#lgrad-p) blue;
  }
  div{
    position:relative;
    width:150px;
    height:150px;
    fill:url(#lgrad-s) red;
  }
</style>
<script>
  const shadow = document.querySelector('div').attachShadow({mode: 'open'});
  shadow.innerHTML="<svg viewbox=\"0 0 512 512\">\
    <path d=\"m258 0c-45 0-83 38-83 83 0 45 37 83 83 83 45 0 83-39 83-84 0-45-38-82-83-82zm-85 204c-13 0-24 10-24 23v48c0 13 11 23 24 23h23v119h-23c-13 0-24 11-24 24l-0 47c0 13 11 24 24 24h168c13 0 24-11 24-24l0-47c0-13-11-24-24-24h-21v-190c0-13-11-23-24-23h-123z\"></path>\
  </svg>\
  <svg height=\"0\">\
  <defs>\
    <linearGradient id=\"lgrad-s\" gradientTransform=\"rotate(75)\"><stop offset=\"45%\" stop-color=\"#ef3c3a\"></stop><stop offset=\"99%\" stop-color=\"#6d5eb7\"></stop></linearGradient>\
    <linearGradient id=\"lgrad-g\" gradientTransform=\"rotate(75)\"><stop offset=\"45%\" stop-color=\"#585f74\"></stop><stop offset=\"99%\" stop-color=\"#b6bbc8\"></stop></linearGradient>\
  </defs>\
</svg>\
";
</script>

guarda il mio test in codepen

Il primo è un normale SVG, il secondo è all'interno di una shadow dom.

— Roland Gautier
fonte
-4

Ecco come impostare un linearGradient su un elemento target:

<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>
— axelparatre
fonte
Niente nella domanda implica l'uso di php.
— ACJ
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.