Round trail corners on semiCircle

[xApep]

Hey, there are couple of the same issues here but no one is really solved. I'm using semiCircle and I want that the stroke and trail has rounder corners: https://jsfiddle.net/xapep/jfx46z9L/

But as you can see in the example, the trail has square ending.

But if check source code the path of trail has stroke-linecap="round" and when you rotate trail path you can see that it has round corner

What that means that the trail is bigger (length) as the viewBox so that's why everything gets cut off, even when you have bar.animate(1.0); // Number from 0.0 to 1.0 the stroke will not have round border anymore.

If I inline (inspect) change viewbox from 0 0 100 50 to 0 0 100 60 I can see the round corners for everything.

So is there any solution for this?

Thanks.

[xApep]

Update. I've set viewbox for 5 units more than default and it works, should be proper solution since 50 is a 50% (semi circle). bar.svg.setAttribute('viewBox', '0 0 100 55');

[kimmobrunfeldt]

This is an issue indeed. The proper solution depends on the use case. The amount of padding needed for viewBox depends on the bar width (how round the cap is). I'm not sure how to solve this in a general way, but maybe the best way would be to add an explicit strokeLinecap: "round" option which would then enlargen the viewBox as needed.

Happy to accept PR which does this!