Riempire una forma SVG con un gradiente

Come posso applicare sfumatura lineare e ombra a questo modello?

<svg viewbox="0 0 60 10"> 
 
    <pattern x="-8" id="waves" patternUnits="userSpaceOnUse" width="10" height="10"> 
 
    <path d="M0 10 V5 Q2.5 3.5 5 5 T10 5 V10" fill="#FFC338" /> 
 
    </pattern> 
 
    <rect x="0" y="0" width="60" height="7" fill="url(#waves)" /> 
 
</svg>

fonte

2016-05-19 Shahid

Che aspetto avrebbe se avessi un gradiente e un motivo? –

gradiente come nell'immagine sopra e modello come u esegui il codice sopra – Shahid

Questo è solo un gradiente. Dov'è il modello. –

Come commentato da Paul LeBeau, è necessario convertire la forma ondulata a un percorso, allora si può riempire la forma ondulata con un linear gradient come mostrato in questo esempio:

<svg viewbox="7.5 0 60 10"> 
 
    <defs> 
 
    <linearGradient id="gradient"> 
 
     <stop offset="5%" stop-color="#FFC338" /> 
 
     <stop offset="95%" stop-color="#FFEA68" /> 
 
    </linearGradient> 
 
    </defs> 
 
    <path fill="url(#gradient)" d="M0 10 V5 Q2.5 2.5 5 5 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 V10" /> 
 
</svg>

fonte

2016-05-20 08:54:59

grazie mille, hai risolto di nuovo il mio grosso problema ... – Shahid

Qualcuno sa perché usano sempre negli esempi 5% e 95% invece di 0% e 100%? Solo curioso ... – noitseuq

@noitseuq nessun vero motivo per cui non fa molta differenza nell'output. –

provare le seguenti:

Posizionare tutte le definizioni di gradiente e di pattern all'interno di un blocco <defs>. Dopo aver chiuso il blocco di difetti, posizionare i tag del contenuto visibile.

fonte

2016-05-20 01:15:39

L'ho appena provato e funziona per me! Successo !! –

come aggiungere ombra al lato superiore? – Shahid

non

esattamente quello che stai cercando, ma prova:

<svg viewbox="0 0 100 80"> 

    <defs> 


    <filter id="f1" x="0" y="0" width="140%" height="200%"> 
     <feOffset result="offOut" in="SourceAlpha" dx="8" dy="6" /> 
     <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" /> 
     <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> 
    </filter> 

    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
     <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> 
     <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
    </linearGradient> 

     <pattern x="-8" id="waves" patternUnits="userSpaceOnUse" width="50" height="20"> 
     <path d="M0 10 V5 Q2.5 3.5 5 5 T10 5 V10" fill="url(#grad1)" /> 
     </pattern> 

    </defs> 

     <rect x="0" y="3" width="200" height="20" fill="url(#waves)" filter="url(#f1)" /> 

</svg>

Modifica parametri numerici individualmente per vedere l'effetto.

fonte

2016-05-27 13:47:32

Riempire una forma SVG con un gradiente

risposta

Problemi correlati