Javascript 如何在svg中围绕整个圆添加笔划并设置旋转圆的动画？

以下是我的JSFIDLE链接：

现在我需要在整个绿色圆圈周围添加笔划

如果我这样添加：

stroke=“#000”stroke width=“2”

。。它显示只有笔划的文本

我需要像这个一样的

而且还要动态旋转，我的意思是不是整个圆圈只旋转绿色圆圈内的6个部分

我不熟悉使用SVG，有人能帮我吗

我可以知道怎么做吗

---

提前感谢。

只需在SVG末尾添加一个新圆圈：

<circle cx="100" cy="100" r="100" stroke ="#000" stroke-width="2" fill="none"/>

---

保罗已经展示了如何画一个笔划，我将继续他的回答，展示如何旋转并在悬停时停止。见此：

我使用了这个css规则：

svg:not(:hover) {
  -webkit-animation: rotateClockwiseAnimation 5s linear infinite;
  /* Safari 4+ */
  -moz-animation: rotateClockwiseAnimation 5s linear infinite;
  /* Fx 5+ */
  -o-animation: rotateClockwiseAnimation 5s linear infinite;
  /* Opera 12+ */
  animation: rotateClockwiseAnimation 5s linear infinite;
}

.frag{
填充：绿色；
冲程：#FFFFFF；
过渡：填充0.3s；
}
.中心{
填充物：红色；
宽度：50%；
}
a:悬停，该死{
填充：#FFC722；
}
正文{
字号：5px；
填充：#fff；
}
.左上角{
-ms变换：旋转（-38度）；
-webkit变换：旋转（-38度）；
变换：旋转（-38度）；
}
.右上角{
-ms变换：旋转（38度）；
-webkit变换：旋转（38度）；
变换：旋转（38度）；
}
.左中下角{
-ms变换：旋转（38度）；
-webkit变换：旋转（38度）；
变换：旋转（38度）；
}
.右中下角{
-ms变换：旋转（-25度）；
-webkit变换：旋转（-25度）；
变换：旋转（-25度）；
}
@-webkit关键帧旋转锁定动画{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}
@-moz关键帧旋转锁定动画{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}
@-o关键帧旋转锁定动画{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}
@关键帧旋转锁定动画{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}
svg:not（：悬停）{
-webkit动画：rotateClockwiseAnimation 5s线性无限；
/*狩猎4+*/
-moz动画：rotateClockwiseAnimation 5s线性无限；
/*外汇5+*/
-o-动画：旋转锁定动画5s线性无限；
/*歌剧院12+*/
动画：旋转锁定动画5s线性无限；
}

你已经知道如何画圆圈了——中间有一个红色的圆圈。复制并调整以获得周围的圆。“动态旋转”需要进一步定义。现在还不清楚你想要什么样的旋转，或者什么时候。好的@Roamer-1888：一个问题可能会解决。。它是动态旋转的，这六个部分。。无论是顺时针还是逆时针。。这不是问题。感谢旋转方向只是一个因素。例如，是否希望连续旋转，如果需要，速度是多少，或者是否希望拖动旋转动作？除了更好地指定它之外，您还需要演示在旋转方面的一些努力。@Roamer-1888:速度意味着，它是正常的。和连续旋转。。谢谢……你试过什么？网上有很多关于如何进行旋转和其他变换的教程。StackOverflow是为解决您自己无法解决的问题而提供的帮助。如果我听起来很刻薄，很抱歉，但如果您在谷歌上搜索“svg动画旋转”，您将获得近50万点击率。：）这就像地球自转一样。。。我需要知道，在我的圆圈内，6个部分必须旋转@保罗：非常感谢@naeem：但还是要改变一点。。这两个文本没有转换对吗？1.个人生活和2.奖项。。。而且所有文本的对齐都不正确。。谢谢。@rish您可以发布另一个问题，这将让您获得更多的用户尝试解决您的问题。。如果你发布另一个问题，请让我知道如果我们仔细看，为什么这两篇文章是1.我访问过的地方和2.学院，与其他地方不同，对吗？让我们来看看。