search

naikus / svg-gauge

Minimalistic, animated SVG gauge. Zero dependencies
MIT License
319 stars 74 forks source link

Gradient Stroke #19

Closed sadiqkhoja closed 5 years ago

sadiqkhoja commented 6 years ago

Is there any option to add gradient stroke?

jitenderchand1 commented 6 years ago

I did it like this,

Add svg element into DOM that will have the gradient.

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

In your css use this

.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;
}