SVG画像を構成するストロークのグラデーションカラーを作成することは可能ですか？

Question

下の2行に表示されるストロークカラーでグラデーションを行うことができますか？＃389967 。これは、SCSS上だ、完全なソースコードはここで見つけることができ

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

SVGですが、CSSにそれをコンパイルすることができます：私は前景色を変更しているよ

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

このグラフの勾配を得るために、それが可能かどうか分かりますか？私は0％と非常に近いことは緑であり、それは100％に近づいたときに、事前

Answer 1

で

赤おかげでこれは使用してなんとかですされている場合、エネルギー消費量のメーターのように測定したい

ストロークのSVGパターンとして保存された画像で、エッジをもはや丸めることができないという警告があります。ストロークキャップは技術的に要素の開始点を過ぎるため、削除しない限り、グラデーション（赤色）の100％値のスライバーが覗き込みます。

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> 

そしてフォアグラウンド色としてそれを使用します。私が行ったのと同じ画像を使用する予定の場合は、私の個人的なサーバでホストされているので、上記のリンクからそれを保存し、別の場所にアップロードしてください。