围绕圆圈旋转svg路径答案

【问题标题】：Rotate svg path around circle围绕圆圈旋转svg路径
【发布时间】：2018-07-01 20:08:40
【问题描述】：

我想围绕圆形旋转多边形。我想像这样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>

【问题讨论】：

标签： css html svg path rotation

【解决方案1】：

我不知道您链接到的网站为什么混合使用 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>

【讨论】：

你拯救了我的一天！但是如何实现链接网站中显示的动画？
你的意思是当你滚动时它是如何逐步旋转的？这真的是一个不同的问题。这里有很多关于如何在滚动时制作动画的问题。尝试其中一个，如果遇到困难，请再问一个问题。

【解决方案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>

【讨论】：

是的，这是另一种方式。但是你能创建类似提到的链接吗？