Grandients not working (again?)

[RaXaR]

Hi there :)

We are using version 0.3.7 and the suggestion listed here #29 is not working.
When we set the color to a solid #F00 it works fine.

Any suggestions?

[crisbeto]

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?

[RaXaR]

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>

[crisbeto]

Worked for me in all major browsers (http://i.imgur.com/yHWcVSK.png). Maybe something else in your app is messing with it?

[RaXaR]

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

[crisbeto]

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

[RaXaR]

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.

[crisbeto]

You can try to set the color as color="url('/#yourGradientIdHere')" or color="url('#yourGradientIdHere')" (note the extra quotes).

[RaXaR]

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.

[crisbeto]

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.

[RaXaR]

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 ?

[crisbeto]

It did, in all browsers (event IE9), both with a localhost and just by opening the index.html

[RaXaR]

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.

[crisbeto]

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.

[crisbeto]

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.

[crisbeto]

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.

[crisbeto]

I've pushed a fix for it in 0.3.8, let me know if it works.

[RaXaR]

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.

[RaXaR]

Awesome, that fixed it. Thank you very much!

[crisbeto]

Great, thanks for reporting it.