如何在整个圆中添加笔触并设置动画以在svg中旋转圆？

Question

这是我的jsfiddle链接： 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"/>

演示在这里摆弄

Answer 2

保罗已经展示了如何绘制笔画，我将继续他的回答，展示如何旋转和停下来。 看到这个： 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 }