使用SVG圆，如何定位起点？

Question

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

CODEPEN

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%);
}

Answer 1

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>