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

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 ponent in react to render this HTML: .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%);
}

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 ponent in react to render this HTML: https://github./wmartins/react-circular-progress/blob/gh-pages/src/js/ponents/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%);
}

Share Improve this question edited Jul 10, 2017 at 4:48 Jinu Kurian 9,4263 gold badges29 silver badges36 bronze badges asked Jul 9, 2017 at 18:32 AnnaSm 2,3006 gold badges24 silver badges35 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - With a SVG circle, how to position the starting point? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)