Wypełnić kształt SVG gradientem

Jak mogę zastosować liniowy gradient i cień do tego wzoru?

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

Źródło

2016-05-19 Shahid

Co by to wyglądało, gdybyś miał gradient i wzór? –

gradient jak na powyższym obrazku i wzór taki sam jak w powyższym kodzie – Shahid

To tylko gradient. Gdzie jest wzór. –

Jak komentował Paul LeBeau, trzeba przekonwertować falisty kształt jednej ścieżki, a następnie można wypełnić falisty kształt z linear gradient jak pokazano w poniższym przykładzie:

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

Źródło

2016-05-20 08:54:59

dziękuję, rozwiązałeś mój wielki problem ponownie ... – Shahid

Czy ktoś wie, dlaczego zawsze używają w przykładach 5% i 95% zamiast 0% i 100%? Po prostu ciekawy ... – noitseuq

@noitseuq nie ma prawdziwego powodu, że nie ma dużej różnicy w wynikach. –

Spróbuj:

miejsce wszystkich definicji gradientu i wzór obrębie <defs> bloku. Po zamknięciu bloku Defs umieść widoczne znaczniki treści.

Źródło

2016-05-20 01:15:39

Po prostu próbowałem i działa to dla mnie! Powodzenie !! –

jak dodać cień do górnej strony? – Shahid

nie

dokładnie tego, czego szukasz, ale spróbuj:

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

Edytuj parametry numeryczne indywidualnie, aby zobaczyć efekt.

Źródło

2016-05-27 13:47:32

Wypełnić kształt SVG gradientem

Odpowiedz

Powiązane problemy