Html SVG循环进程，如何启动顶部的仪表？

我正在努力构建一个SVG循环进度表

在下面的片段中。我显示仪表渲染完成20%。问题是我需要仪表从上止点开始，而不是电流为90度。如何使SVG circle进度表从圆圈的顶部/中心开始

#svg圆{
笔划偏移：0；
过渡：行程偏移1s线性；
行程：#311321；
笔画宽度：1米；
}
#svg#条{
笔画：红色；
}
#续{
显示：块；
高度：200px；
宽度：200px；
利润率：2米自动；
边界半径：100%；
位置：相对位置；
}
#续：之后{
位置：绝对位置；
显示：块；
高度：160px；
宽度：160px；
左：50%；
最高：50%；
内容：属性（数据pct）“%”；
利润上限：-80px；
左边距：-80px；
边界半径：100%；
线高：160px；
字号：2em；
}

---

您可以使用

#bar

上的

transform='rotate（-90 100）

循环从顶部开始

请参阅下面的代码片段：

#svg圆{
笔划偏移：0；
过渡：行程偏移1s线性；
行程：#311321；
笔画宽度：1米；
}
#svg#条{
笔画：红色；
}
#续{
显示：块；
高度：200px；
宽度：200px；
利润率：2米自动；
边界半径：100%；
位置：相对位置；
}
#续：之后{
位置：绝对位置；
显示：块；
高度：160px；
宽度：160px；
左：50%；
最高：50%；
内容：属性（数据pct）“%”；
利润上限：-80px；
左边距：-80px；
边界半径：100%；
线高：160px；
字号：2em；
}

我会把两个圆圈放在一个组中，然后旋转组

视口也不会做任何事情，你是说viewBox吗