Comments (19)
It works in the demo. I assume it's because you don't have the gradient defined in your HTML (you can see how it's defined here https://github.com/crisbeto/angular-svg-round-progressbar/blob/master/build/index.html#L133). Can you post your HTML?
from angular-svg-round-progressbar.
sure thing:
<div class="row">
<div
round-progress
max="100"
current="80"
color="url(#yourGradientIdHere)">
<svg>
<linearGradient id="yourGradientIdHere" x1="0" x2="0" y1="0" y2="1">
<stop offset="5%" stop-color="green"/>
<stop offset="95%" stop-color="gold"/>
</linearGradient>
</svg>
</div>
</div>
from angular-svg-round-progressbar.
Worked for me in all major browsers (http://i.imgur.com/yHWcVSK.png). Maybe something else in your app is messing with it?
from angular-svg-round-progressbar.
gosh, that is possible. Is there any way i can debug the gradient assignment part in roundProgress.js?
EDIT: not sure if it's relevant, we're using AngularJS 1.4.6
from angular-svg-round-progressbar.
Well not the cleanest way, but you can try to console.log(options)
in here https://github.com/crisbeto/angular-svg-round-progressbar/blob/master/build/roundProgress.js#L459
from angular-svg-round-progressbar.
Hmm, it is set correctly:
color "url(#yourGradientIdHere)"
It appears that it's not finding the element .. not sure why. I'll keep testing and report back if I find a solution.
Thanks for the assist so far.
from angular-svg-round-progressbar.
You can try to set the color as color="url('/#yourGradientIdHere')"
or color="url('#yourGradientIdHere')"
(note the extra quotes).
from angular-svg-round-progressbar.
Thanks, I tried both of those but they failed too. However, I did find that the gradient doesn't work in your /dist/index.html file either.
I copied all the files from /dist to my localhost root directory.
Then I copied this HTML:
<div class="row">
<div
round-progress
max="100"
current="80"
color="url(#yourGradientIdHere)">
<svg>
<linearGradient id="yourGradientIdHere" x1="0" x2="0" y1="0" y2="1">
<stop offset="5%" stop-color="green"/>
<stop offset="95%" stop-color="gold"/>
</linearGradient>
</svg>
</div>
</div>
to index.html, just before
EDIT <h2>Sample progressbar</h2>
Then loaded the file with http://localhost/index.html and the progressbar gradients did not show.
When I load the file as file:///blah/blah/index.hml then it works.
from angular-svg-round-progressbar.
Well.. that's odd. Going back to the article that I took the gradient example from I can see that I skipped some parts like wrapping the gradient in <defs>
and the xmlns="http://www.w3.org/2000/svg" version=" xmlns:xlink="http://www.w3.org/1999/xlink
attributes.
from angular-svg-round-progressbar.
Hmm, i just retried with
<div class="row">
<div
round-progress
max="100"
current="80"
color="url(#yourGradientIdHere)">
<svg width="120" height="120"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<linearGradient id="yourGradientIdHere">
<stop offset="5%" stop-color="green"/>
<stop offset="95%" stop-color="gold"/>
</linearGradient>
</defs>
</svg>
</div>
</div>
still no show. I wonder if it's somehow related to my webserver config.
Did this work on your http://localhost/index.html ?
from angular-svg-round-progressbar.
It did, in all browsers (event IE9), both with a localhost and just by opening the index.html
from angular-svg-round-progressbar.
It must be something with my config then, dammit what on earth could it be.
When I just open the file it works, the moment it passes through the webserver then it dies.
from angular-svg-round-progressbar.
It didn't happen on the basic connect localhost that's set up in the Grunt file, but it did happen on the Python localhost that I'm using for work. This is pretty strange but at least I have a way of reproducing it now.
from angular-svg-round-progressbar.
This might be a browser issue, because I tried the example from MDN and the one from the W3C on an empty HTML page (no css, javascript etc.) and the gradient still didn't show up.
from angular-svg-round-progressbar.
Actually I think I found it. Apparently it breaks if the page has a <base href="/">
element in the head. Does yours have this? It started working for me after I removed it.
from angular-svg-round-progressbar.
I've pushed a fix for it in 0.3.8, let me know if it works.
from angular-svg-round-progressbar.
Hi sorry for delayed response. Yes we have <base href="/">
on the page. I'll test the fix and let you know in a minute. Thanks for taking the time.
from angular-svg-round-progressbar.
Awesome, that fixed it. Thank you very much!
from angular-svg-round-progressbar.
Great, thanks for reporting it.
from angular-svg-round-progressbar.
Related Issues (20)
- proposed new library HOT 7
- Question: Does v4 break on Angular 9? HOT 5
- [^4.0.0] [Angular 10.0.8] Production build isue. Related to #204 HOT 2
- Animation when max changed
- Errors with Angular 9 - ɵɵFactoryDef HOT 10
- Angular 9 error ɵɵFactoryDef
- Compilation failed after upgrading to 5.0.1 HOT 2
- Could not be served HOT 1
- contribution
- Support for Angular 11 HOT 1
- Small circle at the end of outer stroke
- Filling color in case of 0 current value HOT 1
- Support Angular 12 HOT 1
- Memory leak when drawing progress HOT 2
- Error - Angular 11.2.7 HOT 1
- ARIA progressbar nodes must have an accessible name HOT 1
- error TS2707: Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments. HOT 2
- Angular 16 support HOT 1
- Angular-svg-round-progressbar for Angular 9? HOT 1
- Inconsistent URL Parsing in resolveColor function affecting SVG Strokes HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-svg-round-progressbar.