Est-il possible de faire une couleur de dégradé d'un trait qui compose une image SVG?

Question

Je voudrais savoir s'il est possible de faire un dégradé dans la couleur du trait apparaissant dans les deux lignes ci-dessous et est réglé sur # 389967 . Ceci est un SVG

.chart-three svg .circle-foreground { 

    stroke: #389967; 
    stroke-dasharray: 494.55px 549.5px; 
    stroke-dashoffset: 494.55px; 
    stroke-linecap: round; 
    -webkit-transform-origin: 50% 50%; 
      transform-origin: 50% 50%; 
    -webkit-transform: rotate(-90deg); 
      transform: rotate(-90deg); 
} 

Le code source complet se trouve ici, il est sur SCSS, mais vous pouvez le compiler à CSS:

https://codepen.io/kunalkamble/pen/XXbWwN

Je cherche à changer la couleur de premier plan de ce tableau, afin de l'obtenir gradient, savez-vous si cela est possible?

Je voudrais mesurer comme un mètre de la consommation d'énergie, quand est très proche de 0% est vert et quand il est près de 100% est rouge

merci à l'avance

Answer 1

Ceci est faisable en utilisant une image stockée comme un motif SVG pour votre coup, avec l'avertissement étant que vous ne pouvez plus arrondir les bords. Les coupures de course dépassent techniquement le début de votre élément, donc un ruban de la valeur de 100% du dégradé (rouge) apparaît à moins que vous ne l'enleviez.

https://codepen.io/will0220/pen/xXjKry

<svg role="img" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <pattern id="fillColors" patternUnits="userSpaceOnUse" width="200" height="200"> 
     <image xlink:href="http://willmurdoch.com/images/strokeGrad.jpg" width="200" height="200" /> 
    </pattern> 
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"> 
     <stop offset="0%" stop-color="red"/> 
     <stop offset="100%" stop-color="green"/> 
    </linearGradient> 
    </defs> 
</svg> 

Ensuite, utilisez que la couleur de premier plan. Si vous prévoyez d'utiliser la même image que moi, veuillez l'enregistrer à partir du lien ci-dessus et la télécharger à nouveau ailleurs, car elle est hébergée sur mon serveur personnel.