Open Avishaidev opened 7 years ago
You can check out the demo's source code. You're supposed to put an SVG element, containing the gradient, somewhere on the page:
<svg>
<linearGradient id="your-gradient-id" x1="0" x2="0" y1="0" y2="1">
<stop offset="5%" stop-color="green"/>
<stop offset="95%" stop-color="gold"/>
</linearGradient>
</svg>
Afterwards you pass the gradient id to the progress circle:
<round-progress
[current]="current"
[max]="max"
color="url(#your-gradient-id)"></round-progress>
Has anyone had issues when trying to implement this dynamically? I have a bunch of pre-defined gradients and I am trying to switch between them. For some reason, only the first gradient is working.
Do the gradients have unique ids?
@crisbeto Yes they do. I am going to try one possible work-around; if that doesn't work I can provide an update with a JSFiddle or something.
I found the solution very simply
just leave the color empty like this
<round-progress ... color="" ...> </round-progress>
In the global html, add a gradient
`
`
In styles write just url (id)
.round-progress path { stroke: url(#progressCircle1); }
@crisbeto Thanks! Works For me
@crisbeto Thanks!
@mmgmail thanks!, works for me
It seems like rerenders on some web browsers get annoyed that ids are being redefined, so going to try putting the definition globally like in the replies here.
Please can you explain how to create gradient as at demo? Thanks