How do I change this fill gradient from bottom to top
How do I change this fill gradient from bottom to top
<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>
I want #F60 to be the bottom and #FF6 to be the top and i dont want to rotate it ..
1 Answer
1
You have to set x1, x2, y1, y2 to specify direction of linearGradient (w3c spec):
x1
x2
y1
y2
linearGradient
rect {
fill: url(#MyGradient);
}
<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="MyGradient" x1="100%" y1="100%">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
<rect width="100" height="50" />
</svg>
@PaulLeBeau OP wanted
#F60 at the bottom and #FF6 on the top– fen1x
Jul 1 at 22:38
#F60
#FF6
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
I never worked with svg but, can't you just switch the 'stop' lines?
– M. Gara
Jul 1 at 5:38