I'm working with a linear gradient and here is the code:
<svg width="120" height="240" >
<linearGradient id="dsp" x1="0" x2="0" y1="0" y2="1">
<stop class="stop1" offset="0%"/>
<stop class="stop2" offset="50%"/>
<stop class="stop3" offset="100%"/>
</linearGradient>
<style type="text/css">
.stop1 { stop-color: red; }
.stop2 { stop-color: yellow; stop-opacity: 0.7; }
.stop3 { stop-color: green; }
</style>
My goal is to increase the height of the middle color, which is yellow. When I tried increasing the offset value for yellow, it shifted downwards instead of expanding in width. I would like the red and green colors to only occupy 10% of the SVG's height while adjusting the distribution as follows:
Red >> 15%
yellow >> 70%
green >> 15%
This is how I want the colors distributed.