How to manage gradients in SVG via CSS?

Question

I need a gradient to appear when hovering over a block. How to implement it?

.container { width: 100px; height: 100px; background-color: #000; fill: #fff; } .container:hover .ico { fill: red; } .ico { }

 <div class="container"> <div class="ico"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="58" height="58" viewBox="0 0 58 58"> <path d="M0.000,57.999 L0.000,52.199 L58.000,52.199 L58.000,57.999 L0.000,57.999 ZM40.020,31.899 L18.009,31.899 L11.600,46.399 L5.075,46.399 L26.100,-0.001 L31.900,-0.001 L52.925,46.399 L46.400,46.399 L40.020,31.899 ZM29.000,6.988 L20.561,26.099 L37.439,26.099 L29.000,6.988 Z" class="cls-1" /> </svg> </div> </div>

Alexey Giryayev Alexey Giryayev 3,759 7 silver marks 34 bronze marks · Accepted Answer · 2016-11-21T16:41:44

I think, by example, everything will be clear. Smoothness can be set through transition.

 .container { width: 100px; height: 100px; background-color: #000; } .container:hover .right { stop-color: orangered; }

 <div class="container"> <div class="ico"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="58" height="58" viewBox="0 0 58 58"> <defs> <linearGradient id="Gradient-1" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0%" stop-color="#fff" /> <stop offset="100%" stop-color="#fff" class="right" /> </linearGradient> </defs> <path d="M0.000,57.999 L0.000,52.199 L58.000,52.199 L58.000,57.999 L0.000,57.999 ZM40.020,31.899 L18.009,31.899 L11.600,46.399 L5.075,46.399 L26.100,-0.001 L31.900,-0.001 L52.925,46.399 L46.400,46.399 L40.020,31.899 ZM29.000,6.988 L20.561,26.099 L37.439,26.099 L29.000,6.988 Z" class="cls-1" fill= "url(#Gradient-1)" /> </svg> </div> </div>

But do not tell me how to apply such a gradient background-image: linear-gradient (60deg, # fc803b 0%, # e85867 97%, # e85867 100%);

How to manage gradients in SVG via CSS?

1 answer 1

More articles: