react-circular-progressbar icon indicating copy to clipboard operation
react-circular-progressbar copied to clipboard

circleRatio and SVG dimensions

Open ukozdan opened this issue 5 years ago • 1 comments

🚀 Feature request

Problem description

When the gauge size is reduced to a semi-circle via circleRatio, the SVG size should reduce to fit. However, because stroke-dasharray is used to hide the unwanted part of the arc, the hidden part of the gauge continues to use space and the SVG dimensions remain the same.

Suggested solution (optional)

Ideally, the path should reflect the circle ratio, or perhaps some use of the width, height, viewport and viewBox could obscure the unneeded/hidden part of the arc.

<svg width="100" height="50" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin slice"></svg>

ukozdan avatar Mar 18 '20 18:03 ukozdan

That's an interesting one. I'm open to the idea of adjusting the viewBox dimensions, but I'm not sure it's feasible when both rotation and circleRatio are configurable. A proof of concept PR would be welcome.

kevinsqi avatar Apr 08 '20 04:04 kevinsqi