有了SVG圈，如何定位起点？

Question

我正在努力创建一个SVG圈子进度指示器...这是我的输出：

CODEPEN

问题是我需要红色笔划从顶部开始，而不是在当前的90％角度......我可以添加一些CSS来重新定位红色笔划从顶部开始吗？

仅供参考，我在反应中使用以下组件来呈现此HTML：https://github.com/wmartins/react-circular-progress/blob/gh-pages/src/js/components/CircularProgress.jsx.js

下面的codepen源

HTML

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

CSS

{{1}}

Answer 1

您可以使用transform，添加transform="rotate(-90 25 25)"，它将从顶部开始

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

如果要使用CSS，您可以轮换svg元素而不是circle（基于其形状可能会或可能不会）

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