围绕圆圈旋转 svg 路径

Question

我想围绕圆形旋转多边形。我想像这样 http://www.enspiregroup.com 将多边形的起点固定到圆心。我尝试了很多但卡住了。

查看下面的代码。

CSS 和 HTML5

    .circle-segment {
        position: absolute;
        top: 0;
        width: 260px;
        height: 260px;
    }
    div .circle-wrap {
        position: absolute;
        max-width: 360px;
        margin: 0 auto;
        top: 107px;
        left: 29.7%;
    }
    main.css:1032
    .circle-wrap {
        width: 362px;
        height: 362px;
    }
    .main-circle {
        position: relative;
        height: 300px;
        width: 300px;
        background-color: #0c272e;
        border-radius: 50%;
        margin: 15px auto;
    }

  <?xml version="1.0"?>
    <div class="circle-wrap">
        <div class="main-circle">
           <svg class="circle-segment" class="circle-wrap"
           xmlns="http://www.w3.org/2000/svg" version="1.1"
           xmlns:xlink="http://www.w3.org/1999/xlink" >
           <path id="little" d="M180,180 v-180 a180,180 0 0,0 -180,180 z"        
           fill="#066a8e"></path>
           <animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="00 60 70"
                          to="360 60 70"
                          dur="10s"
                          repeatCount="indefinite"/>
    
              </svg>
        </div>
    </div>

Answer 1

CSS 变换和动画呢？

.main-circle {
  background-color: #0c272e;
  border-radius: 50%;
  height: 300px;
  margin: 15px auto;
  position: relative;
  width: 300px;
}

svg {
  animation: rotate 5s infinite linear;
  height: 362px;
  left: -31px;
  position: absolute;
  top: -31px;
  width: 362px;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

<div class="main-circle">
  <svg>
    <path d="M180,180 v-180 a180,180 0 0,0 -180,180 z" fill="#066a8e">
  </svg>
</div>

Answer 2

我不知道为什么您链接到的站点混合使用 HTML 和 SVG 来制作此动画。但这当然不是实现这一目标的简单方法。

将圆也放入 SVG 中要简单得多。

.circle-segment {
  width: 360px;
  height: 360px;
}

<div class="circle-wrap">
  <div class="main-circle">

    <svg class="circle-segment" class="circle-wrap"
         xmlns="http://www.w3.org/2000/svg" version="1.1"
         xmlns:xlink="http://www.w3.org/1999/xlink" >
      <circle cx="180" cy="180" r="150" fill="#0c272e"/>
      <path id="little" d="M180,180 v-180 a180,180 0 0,0 -180,180 z"        
            fill="#066a8e">
        <animateTransform attributeName="transform"
                           attributeType="XML"
                           type="rotate"
                           from="00 180 180"
                           to="360 180 180"
                           dur="10s"
                           repeatCount="indefinite"/>
      </path>
    
    </svg>
  </div>
</div>

围绕圆圈旋转 svg 路径

Rotate svg path around circle

html

css

svg

path

rotation