search

kevinsqi / react-circular-progressbar

A circular progressbar component, built with SVG and extensively customizable
http://www.kevinqi.com/react-circular-progressbar
MIT License
1.09k stars 132 forks source link

circleRatio and SVG dimensions #133

Open ukozdan opened 4 years ago

ukozdan commented 4 years ago

🚀 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>

kevinsqi commented 4 years ago

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.