CODEWITHSUNDEEP
javascriptcssreactjssvg
AnnaSm
AnnaSm

Reputation: 2300

With a SVG circle, how to position the starting point?

I'm working to create an SVG circle progress indicator in react... Here is my output:

CODEPEN

enter image description here

The problem is I need the red stroke to start at the top, not at the current 90% angle... Is there some CSS I can add to reposition the red stroke to start at the top?

FYI, I'm using the following component in react to render this HTML: https://github.com/wmartins/react-circular-progress/blob/gh-pages/src/js/components/CircularProgress.jsx.js

codepen source below

html

<svg class="CircularProgress" width="50" height="50" viewBox="0 0 50 50">
   <circle class="CircularProgress-Bg" cx="25" cy="25" r="24" stroke-width="2px"></circle>
   <circle class="CircularProgress-Fg" cx="25" cy="25" r="24" stroke-width="2px" style="stroke-dasharray: 150.796; stroke-dashoffset: 125.161;"></circle>
   <text class="CircularProgress-Text" x="25" y="25" dy=".4em" text-anchor="middle">17%</text>
</svg>

css

.CircularProgress-Bg,
.CircularProgress-Fg {
    fill: none;
}

.CircularProgress-Bg {
    stroke: #CCC;
}

.CircularProgress-Fg {
    transition: stroke-dashoffset .5s ease-in-out;
    stroke: red;
}

.CircularProgress-Text {
    font-size: 15px;
    font-weight: 600;
    fill: rgba(255,255,255,0.9);
    transform: translate(0 50%);
}

Upvotes: 5

Views: 8608

Answers (1)

Asons
Asons

Reputation: 87191

You could use transform, add transform="rotate(-90 25 25)" and it will start at the top

.CircularProgress-Bg,
.CircularProgress-Fg {
    fill: none;
}

.CircularProgress-Bg {
    stroke: #CCC;
}

.CircularProgress-Fg {
    transition: stroke-dashoffset .5s ease-in-out;
    stroke: red;
}

.CircularProgress-Text {
    font-size: 15px;
    font-weight: 600;
    fill: rgba(255,255,255,0.9);
    transform: translate(0 50%);
}
<svg class="CircularProgress" width="50" height="50" viewBox="0 0 50 50">

   <circle class="CircularProgress-Bg" cx="25" cy="25" r="24" stroke-width="2px"></circle>
   <circle transform="rotate(-90 25 25)" class="CircularProgress-Fg" cx="25" cy="25" r="24" stroke-width="2px" style="stroke-startOffest: 50%;stroke-dasharray: 150.796; stroke-dashoffset: 125.161;"></circle>
   <text class="CircularProgress-Text" x="25" y="25" dy=".4em" text-anchor="middle">17%</text>
</svg>

If to use CSS, you can rotate the svg element instead of the circle (which might or might not be possible based on its shape)

.CircularProgress {
    transform: rotate(-90deg);
}

.CircularProgress-Bg,
.CircularProgress-Fg {
    fill: none;
}

.CircularProgress-Bg {
    stroke: #CCC;
}

.CircularProgress-Fg {
    transition: stroke-dashoffset .5s ease-in-out;
    stroke: red;
}

.CircularProgress-Text {
    font-size: 15px;
    font-weight: 600;
    fill: rgba(255,255,255,0.9);
    transform: translate(0, 50%);
}
<svg class="CircularProgress" width="50" height="50" viewBox="0 0 50 50">
   <circle class="CircularProgress-Bg" cx="25" cy="25" r="24" stroke-width="2px"></circle>
   <circle class="CircularProgress-Fg" cx="25" cy="25" r="24" stroke-width="2px" style="stroke-dasharray: 150.796; stroke-dashoffset: 125.161;"></circle>
   <text class="CircularProgress-Text" x="25" y="25" dy=".4em" text-anchor="middle">17%</text>
</svg>

Upvotes: 7

Related Questions