title: Rotate svg path around circle
body: <p>I want to rotate polygon around circle. I want to fix the starting point of polygon to the center of circle like this <a href="http://www.enspiregroup.com" rel="nofollow noreferrer">http://www.enspiregroup.com</a> .
  I tried a lot but stuck.  </p>
  
  <p>See the code below.</p>
  
  <p><strong>CSS and HTML5</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .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;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;?xml version="1.0"?&gt;
      &lt;div class="circle-wrap"&gt;
          &lt;div class="main-circle"&gt;
             &lt;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" &gt;
             &lt;path id="little" d="M180,180 v-180 a180,180 0 0,0 -180,180 z"        
             fill="#066a8e"&gt;&lt;/path&gt;
             &lt;animateTransform attributeName="transform"
                            attributeType="XML"
                            type="rotate"
                            from="00 60 70"
                            to="360 60 70"
                            dur="10s"
                            repeatCount="indefinite"/&gt;
      
                &lt;/svg&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      </code></pre>
  </div>
  </div>
  </p>