Size is calculated incorrectly about angular-svg-round-progressbar HOT 7 CLOSED

Hmm are you sure? When the radius is set to 100px, my circle is at exactly 200px by 200px (twice the radius). http://i.imgur.com/IDlxFbf.png

from angular-svg-round-progressbar.

I need to be more specific: the problem is the size of <svg> (it is 230 with stroke 15 and 202 with stroke 1), not <circle>. Seems like it is little more complicated than just incorrect size, right?

from angular-svg-round-progressbar.

Ah you're correct that the SVG element is slightly larger. I'll look into it.

from angular-svg-round-progressbar.

Great. I ended up for now with

                    element.css({
                        "width":        size + "px",
                        "height":       (isSemicircle ? size/2 : size) + "px",
                        "margin":       -stroke/2 + "px",
                        "margin-bottom": isSemicircle ? 0 : -stroke/2 + "px",
                        "overflow":     "hidden" // on some browsers the background overflows, if in semicircle mode
                    });

But maybe -Math.floor(stroke/2) would be more appropriate. It may depend on rendering engine, but looks like it always occupies even amount of pixels, at least in Chrome.

from angular-svg-round-progressbar.

It was a while ago when I did this directive, but after looking at it again, I think I remember why the SVG element's size is the diameter + 2*stroke. Its because the stroke throws off the width and height. The browser doesn't consider the stroke as a part of the width of the circle, in reality the circle's width and height are 230px as well. Just for fun I forced the same size on the SVG and the circle ended up overflowing.
It probably depends on what height you expect it to be. I think it would make more sense to take off the stroke from the width and height.

from angular-svg-round-progressbar.

I was afraid that it the circle would be truncated somehow, but it seems to look well in all browsers. I wasn't fond of temporary margin solution because of that extra 1px caused by antialiasing on odd stroke values.

from angular-svg-round-progressbar.

I've released a fix for this (d57571c). From now the element width and height will be the circle's diameter (radius*2)

from angular-svg-round-progressbar.