CSS Gradient SVG

Question

I am trying to apply a gradient to an SVG rect element.

I am currently using the fill attribute. In my CSS file:

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

And the rect element has the correct fill color when viewed in a browser.

However, I would like to know if I can apply a linear gradient to this element?

Answer 1

Just use CSS no matter what you use in the fill attribute. Of course, this requires you to define a linear gradient somewhere in your SVG.

Here is a complete example:

 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> 

Answer 2

2019 Answer

Thanks to the new CSS properties, you can have even more flexibility with variables, also known as 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> 

Just set a named variable for each stop in the gradient, and then adjust as you like in css. You can even dynamically change their values ​​using JavaScript, for example:

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

Answer 3

Based on what Grace wrote, here is an easier way to target svg and change its gradient.

This is what you need to do:

1. Assign classes for each color stop defined in the gradient element.
2. Target CSS and change the stop color for each of these stops using simple classes.
3. Victory!

Some of the benefits of using classes instead of :nth-child are that this will not affect the reordering of your stops. In addition, it clarifies the goals of each class - you will be wondering if you need a blue color for the first or second child.

I tested it on all Chrome, Firefox and 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> 

See an editable example here: https://jsbin.com/gabuvisuhe/edit?html,css,output

Answer 4

Here is a solution where you can add a gradient and change its colors using only CSS:

 // JS is not required for the solution. It 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> 

Answer 5

Here's how to set linearGradient for the target element:

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