如何在整个圆圈周围添加描边并在 svg 中动画旋转圆圈？

Question

这是我的 jsfiddle link：http://jsfiddle.net/q611wenr/4/

现在我需要在整个绿色圆圈周围添加描边。

如果我这样添加：stroke ="#000" stroke-width="2" ..它显示的文本只有笔画..

我需要这个http://s23.postimg.org/w1yktgeuj/Untitled_1.png

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

我刚开始使用 SVG，所以有人可以帮助我吗？

我可以知道怎么做吗？

提前致谢。

Answer 1

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

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

Demo fiddle here

Answer 2

由于 paul 已经展示了如何绘制笔画，我将继续他的回答以展示如何在悬停时旋转和停止。看到这个：http://jsfiddle.net/q611wenr/7/

我使用了这条 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 {
  fill: green;
  stroke: #FFFFFF;
  transition: fill 0.3s;
}
.center {
  fill: red;
  width: 50%;
}
a:hover .frag {
  fill: #FFC722;
}
text {
  font-size: 5px;
  fill: #fff;
}
.mid-up-left {
  -ms-transform: rotate(-38deg);
  -webkit-transform: rotate(-38deg);
  transform: rotate(-38deg);
}
.mid-up-right {
  -ms-transform: rotate(38deg);
  -webkit-transform: rotate(38deg);
  transform: rotate(38deg);
}
.mid-down-left {
  -ms-transform: rotate(38deg);
  -webkit-transform: rotate(38deg);
  transform: rotate(38deg);
}
.mid-down-right {
  -ms-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  transform: rotate(-25deg);
}
@-webkit-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
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;
}

<svg width="500" height="500" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision">
  <a xlink:href="#">
    <path class="frag" d="M100,100 v-100 a100,100 1 0,1 86.6025,50" />
    <text x="135" y="-60.5" text-anchor="middle" class='mid-up-right'>Endorsements</text>
  </a>
  <a xlink:href="#">
    <path class="frag" d="M100,100 l86.6025,-50 a100,100 1 0,1 0,100" />
    <text x="185" y="105" text-anchor="middle">personal life</text>
  </a>
  <a xlink:href="#">
    <path class="frag" d="M100,100 l86.6025,50 a100,100 1 0,1 -86.6025,50" />
    <text x="50" y="222" text-anchor="middle" class='mid-down-right'>Place I am visited</text>
  </a>
  <a xlink:href="#">
    <path class="frag" d="M100,100 v100 a100,100 1 0,1 -86.6025,-50" />
    <text x="145" y="108" text-anchor="middle" class='mid-down-left'>Academy</text>
  </a>
  <a xlink:href="#">
    <path class="frag" d="M100,100 l-86.6025,50 a100,100 1 0,1 0,-100" />
    <text x="15" y="105" text-anchor="middle">awards</text>
  </a>
  <a xlink:href="#">
    <path class="frag" d="M100,100 l-86.6025,-50 a100,100 1 0,1 86.0025,-50" />
    <text x="25" y="60.5" text-anchor="middle" class='mid-up-left'>Career Overview</text>
  </a>
  <a xlink:href="#">
    <circle cx="100" cy="100" r="20" stroke="red" stroke-width="3" fill="red" />
  </a>
  <circle cx="100" cy="100" r="100" stroke="#000" stroke-width="2" fill="none" />
</svg>

好吧，如您所见，此解决方案会进行旋转并在悬停时停止动画，但存在一个问题，它不会在悬停的位置停止，而是在初始位置停止点.

所以你仍然可以克服这个问题，看这个：http://jsfiddle.net/q611wenr/8/

我已经使用 animation-play-state: paused 来暂停旋转。

.frag {
  fill: green;
  stroke: #FFFFFF;
  transition: fill 0.3s;
}
.center {
  fill: red;
  width: 50%;
}
a:hover .frag {
  fill: #FFC722;
}
text {
  font-size: 5px;
  fill: #fff;
}
.mid-up-left {
  -ms-transform: rotate(-38deg);
  -webkit-transform: rotate(-38deg);
  transform: rotate(-38deg);
}
.mid-up-right {
  -ms-transform: rotate(38deg);
  -webkit-transform: rotate(38deg);
  transform: rotate(38deg);
}
.mid-down-left {
  -ms-transform: rotate(38deg);
  -webkit-transform: rotate(38deg);
  transform: rotate(38deg);
}
.mid-down-right {
  -ms-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  transform: rotate(-25deg);
}
@-webkit-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
svg {
  -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;
}
svg:hover {
  animation-play-state: paused
}

<svg width="500" height="500" viewBox="-2 -2 202 203" shape-rendering="geometricPrecision">
  <a xlink:href="#">
    <path class="frag" d="M100,100 v-100 a100,100 1 0,1 86.6025,50" />
    <text x="135" y="-60.5" text-anchor="middle" class='mid-up-right'>Endorsements</text>
  </a>
  <a xlink:href="#">
    <path class="frag" d="M100,100 l86.6025,-50 a100,100 1 0,1 0,100" />
    <text x="185" y="105" text-anchor="middle">personal life</text>
  </a>
  <a xlink:href="#">
    <path class="frag" d="M100,100 l86.6025,50 a100,100 1 0,1 -86.6025,50" />
    <text x="50" y="222" text-anchor="middle" class='mid-down-right'>Place I am visited</text>
  </a>
  <a xlink:href="#">
    <path class="frag" d="M100,100 v100 a100,100 1 0,1 -86.6025,-50" />
    <text x="145" y="108" text-anchor="middle" class='mid-down-left'>Academy</text>
  </a>
  <a xlink:href="#">
    <path class="frag" d="M100,100 l-86.6025,50 a100,100 1 0,1 0,-100" />
    <text x="15" y="105" text-anchor="middle">awards</text>
  </a>
  <a xlink:href="#">
    <path class="frag" d="M100,100 l-86.6025,-50 a100,100 1 0,1 86.0025,-50" />
    <text x="25" y="60.5" text-anchor="middle" class='mid-up-left'>Career Overview</text>
  </a>
  <a xlink:href="#">
    <circle cx="100" cy="100" r="20" stroke="red" stroke-width="3" fill="red" />
  </a>
  <circle cx="100" cy="100" r="100" stroke="#000" stroke-width="2" fill="none" />
</svg>

代码如下：

@-webkit-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotateClockwiseAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
svg {
  -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;
}

svg:hover{
    animation-play-state: paused
}

如何在整个圆圈周围添加描边并在 svg 中动画旋转圆圈？

How to add stroke around whole circle and animate to rotate circle in svg?

javascript

css

jquery

svg