搜索
搜索

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

rish 发表于 Dev
10
ish

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

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

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

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

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

我是新手SVG，所以有人可以帮助我吗？

我可以知道怎么做吗？

提前致谢。

奈姆·谢赫（Naeem Shaikh）

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在svg文件中旋转徽标圆的中心？

来自分类Dev

如何旋转SVG圆

来自分类Dev

如何在“处理”中同时画圆并旋转圆（类似雷达）？

来自分类Dev

如何在svg圆的中心设置图像？

来自分类Dev

如何为SVG中的正方形内的圆制作动画（为嵌套的svg制作动画）？

来自分类Dev

如何在SVG中绘制带边框的圆？

来自分类Dev

在SVG中缩放圆

来自分类Dev

如何在圆到圆的预测公式中添加摩擦/阻尼？

来自分类Dev

如何在matplotlib中添加带注释的圆？

来自分类Dev

如何在R中的圆图上添加除法？

来自分类Dev

如何在gnuplot中将图例添加到圆中？

来自分类Dev

快速旋转贝塞尔曲线路径圆中的笔触边缘

来自分类Dev

使用请求动画帧为画布中的圆设置动画

来自分类Dev

SVG圆动画

来自分类Dev

SVG圆动画

来自分类Dev

如何在UILabel中绘制圆？

来自分类常见问题

如何在CSS中绘制圆扇形？

来自分类Dev

如何在Matlab中绘制圆？

来自分类Dev

如何在Android中绘制圆的直径

来自分类Dev

如何在JavaScript中获得圆图

来自分类Dev

如何在Android中绘制圆线

来自分类Dev

如何在scala中编写适合的圆

来自分类Dev

如何使用matplotlib在Python中为沿圆的圆周移动的多个点设置动画？

来自分类Dev

在圆svg中显示图像

来自分类Dev

如何在 SVG 中设置嘴巴动画？

来自分类Dev

如何在matplotlib中的补丁圆动画中有效地更改颜色？

来自分类Dev

如何在matplotlib中的补丁圆动画中有效地更改颜色？

来自分类Dev

如何在Android拖放过程中创建脉动圆动画

来自分类Dev

动画文字绕圆旋转

Related 相关文章

  1. 1

    如何在svg文件中旋转徽标圆的中心？

  2. 2

    如何旋转SVG圆

  3. 3

    如何在“处理”中同时画圆并旋转圆（类似雷达）？

  4. 4

    如何在svg圆的中心设置图像？

  5. 5

    如何为SVG中的正方形内的圆制作动画（为嵌套的svg制作动画）？

  6. 6

    如何在SVG中绘制带边框的圆？

  7. 7

    在SVG中缩放圆

  8. 8

    如何在圆到圆的预测公式中添加摩擦/阻尼？

  9. 9

    如何在matplotlib中添加带注释的圆？

  10. 10

    如何在R中的圆图上添加除法？

  11. 11

    如何在gnuplot中将图例添加到圆中？

  12. 12

    快速旋转贝塞尔曲线路径圆中的笔触边缘

  13. 13

    使用请求动画帧为画布中的圆设置动画

  14. 14

    SVG圆动画

  15. 15

    SVG圆动画

  16. 16

    如何在UILabel中绘制圆？

  17. 17

    如何在CSS中绘制圆扇形？

  18. 18

    如何在Matlab中绘制圆？

  19. 19

    如何在Android中绘制圆的直径

  20. 20

    如何在JavaScript中获得圆图

  21. 21

    如何在Android中绘制圆线

  22. 22

    如何在scala中编写适合的圆

  23. 23

    如何使用matplotlib在Python中为沿圆的圆周移动的多个点设置动画？

  24. 24

    在圆svg中显示图像

  25. 25

    如何在 SVG 中设置嘴巴动画？

  26. 26

    如何在matplotlib中的补丁圆动画中有效地更改颜色？

  27. 27

    如何在matplotlib中的补丁圆动画中有效地更改颜色？

  28. 28

    如何在Android拖放过程中创建脉动圆动画

  29. 29

    动画文字绕圆旋转

热门标签

归档