Question

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

请参阅下面的代码。

CSS和HTML5

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

将圆圈放入SVG也简单得多。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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>

围绕圆圈旋转svg路径

2 个答案: