Gradient Stroke about svg-gauge HOT 1 CLOSED

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
        <defs>
	    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
	      <stop offset="0%" style="stop-color:#B02A50;stop-opacity:1" />
	      <stop offset="20%" style="stop-color:#DF4972;stop-opacity:1" />
	      <stop offset="30%" style="stop-color:#DF4972;stop-opacity:1" />
	      <stop offset="50%" style="stop-color:#DF4972;stop-opacity:1" />
	      <stop offset="100%" style="stop-color:#B02A50;stop-opacity:1" />
	    </linearGradient>
	    <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
	      <stop offset="0%" style="stop-color:#FFA8BE;stop-opacity:1" />
	      <stop offset="50%" style="stop-color:#FFA8BE;stop-opacity:1" />
	      <stop offset="100%" style="stop-color:#FDC5D2;stop-opacity:1" />
	    </linearGradient>
  </defs>
    </defs>
</svg>	

.three > .gauge > .dial {
  stroke: url('#grad1');
  stroke-width: 6.5;
  stroke-linecap:round;
}
.three > .gauge > .value {
  stroke: url('#grad2');
  stroke-width: 7;
  stroke-linecap:round;
}
.three > .gauge > .value-text {
  fill: #FDC5D2;
}