Open legion7298 opened 3 years ago
Circle Progress is made with SVG. Unfortunately you can't use CSS gradients on SVG elements.
i found how make a gradients, checked on the circle-progress library and its worked! here is snippet bellow!
<svg>
<!-- Gradient (just need to insert in the <svg> tag. The ID must be unique) -->
<linearGradient id="linear-gradient">
<stop offset="0%" stop-color="gold"/>
<stop offset="100%" stop-color="teal"/>
</linearGradient>
<!-- add this attribute instead circle stroke color -->
stroke="url(#linear-gradient)"
</svg>
@albalirus's suggestion works indeed. See a demo on JSFiddle. If using this approach, please keep in mind:
#linear-gradient
) for gradient URL rather than full path.@albalirus thanks a lot for your input.
@tigrr this is good news! Thank you for testing. It is possible to add this gradient feature to the library?
@albalirus, I am thinking about adding gradient to the library. The complication is that most people want gradient along the arc, and that doesn't seem possible.
@albalirus, I am thinking about adding gradient to the library. The complication is that most people want gradient along the arc, and that doesn't seem possible.
Hi @tigrr I found very interested technique to make a gradient along the stroke )) https://bl.ocks.org/mbostock/4163057
@albalirus, I am thinking about adding gradient to the library. The complication is that most people want gradient along the arc, and that doesn't seem possible.
Hi @tigrr I found very interested technique to make a gradient along the stroke )) https://bl.ocks.org/mbostock/4163057
@albalirus thank you for the suggestion and excuse me for late reply. The example you shared fragments the path into multiple small pieces. I think this approach would make it very hard (if possible) to implement animation. And even if implemented, the animation would be jerky.
@albalirus, I am thinking about adding gradient to the library. The complication is that most people want gradient along the arc, and that doesn't seem possible.
Hi @tigrr I found very interested technique to make a gradient along the stroke )) https://bl.ocks.org/mbostock/4163057
@albalirus thank you for the suggestion and excuse me for late reply. The example you shared fragments the path into multiple small pieces. I think this approach would make it very hard (if possible) to implement animation. And even if implemented, the animation would be jerky.
Hi @tigrr Yes, the animation will be unused in this case. This is just for example.
The first our example is very nice i think. And its not hard to implement in the library. https://jsfiddle.net/tikosar/rcu30s82/
How can I express it?
Could you plz... Sugguest a way? ToT