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"/>

Demo fiddle here

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

嗯，正如你所看到的，这个解决方案可以进行旋转并在悬停时停止动画，但是存在一个问题，它不会在它悬停的位置停止，而是在初始点停止。

<小时/> 因此，您仍然可以解决此问题，请参阅：http://jsfiddle.net/q611wenr/8/

我使用了animation-play-state: paused来暂停轮换。

＆＃13;

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

＆＃13;

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

＆＃13;

这是代码：

@-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中设置旋转圆圈的动画？

2 个答案: