title: How can I rotate only the border of this SVG and keep the middle fixed?
body: <p>I want to fix a SVG. I want to only rotate the ID #dotted-line but keep the g id="panda" fixed in the center. Right now the entire SVG rotates at the speed and smoothness that I want, but the middle moves also.</p>
  
  <p>Please click "Run Code Snippet" below and hover your mouse over the icon to see the animation.</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> svg {
     width: 40%;
     display: block;
     margin: 0 auto;
  }
  
      svg:hover {
          width: 40%;
     display: block;
     margin: 0 auto;
              -webkit-animation-name: rotate;
              -webkit-animation-duration: 2s;
              -webkit-animation-iteration-count: 1;
              -webkit-animation-timing-function: linear;
              -moz-animation-name: rotate;
              -moz-animation-duration: 2s;
              -moz-animation-iteration-count: 1;
              -moz-animation-timing-function: linear;
              animation-name: rotate;
              animation-duration: 2s;
              animation-iteration-count: 1;
              animation-timing-function: linear;
          }
  
          @-webkit-keyframes rotate {
              from {-webkit-transform: rotate(0deg);}
              to {-webkit-transform: rotate(360deg);}
          }
  
          @-moz-keyframes rotate {
              from {-moz-transform: rotate(0deg);}
              to {-moz-transform: rotate(360deg);}
          }
  
          @keyframes rotate {
              from {transform: rotate(0deg);}
              to {transform: rotate(360deg);}
          }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg id="panda-circ" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.6182 107.5305"&gt;
    &lt;title&gt;panda-rotate&lt;/title&gt;
    &lt;ellipse id="dotted-line" cx="54.3091" cy="53.7653" rx="53.8091" ry="53.2652" style="fill: none;stroke: #2717ff;stroke-dasharray: 4.018310070037842,4.018310070037842"/&gt;
    &lt;g id="panda"&gt;
      &lt;path d="M33.83,73.7l5.46-11.0852L53.0219,50.5369l17.8688-1.9853,14.394,6.4525,1.489-1.1582,4.7981-1.1582,3.3091,2.1509L98.19,52.1916l5.2943-.3308,4.3016,2.978L107.62,59.306s7.7761,6.9488,7.7761,7.1142,2.6474,5.7908,2.6474,5.7908l.6617,4.3016L124,79.16l-4.9635,9.7613-8.2723,3.971-10.2581.8271,2.1509,2.9783L94.7155,98.683,81.4794,95.87,62.6181,98.5175l-4.1362.3308S41.4405,96.0358,41.4405,95.87s-8.1072-9.7616-8.1072-10.0924S33.83,74.1965,33.83,73.7Z" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/&gt;
      &lt;path d="M34.6879,73.6446l9.8782-4.0771,4.6025,1.1981,2.9181,8.5791a19.851,19.851,0,0,1-.311,3.101c-.1644.0045-4.1244,5.5747-4.1244,5.5747L58.6493,98.4777l5.1005-.8018,3.3061-7.3731,1.6624-8.3209-1.6376-3.431s-5.7551-.8356-5.9191-.9966a70.2706,70.2706,0,0,0-7.92,3.7625" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/&gt;
      &lt;path d="M58.5861,98.6832S56.9139,91.9725,56.9139,91.8,59.65,85.09,59.8026,85.09s5.1289-3.2827,5.1289-3.2827l3.233,2.9385L67.1,91.6283l-3.1928,6.8828Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/&gt;
      &lt;path d="M33.9952,73.7l10.2578-4.1362,5.6254,1.3236,6.9488,8.6034L52.36,82.6343l-4.1364,5.1292S59.64,98.3521,59.64,98.5175s-.9925.3308-.9925.3308L41.4405,95.705l-8.1072-9.5962Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/&gt;
      &lt;path d="M37.47,66.0893a25.1522,25.1522,0,0,1-2.1509-1.9206,15.6168,15.6168,0,0,0,.6617-2.6588l3.971-3.693,2.6472,2.068s-2.6472,2.659-2.8128,2.659S37.8006,65.6462,37.47,66.0893Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/&gt;
      &lt;path d="M44.0877,58.3811l.3185,11.3573,5.3988,2.638,3.217-21.84-8.297,19.5565" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/&gt;
      &lt;path d="M70.8645,48.7171s-20.9863,22.17-20.9863,22.3358,21.84,5.7908,21.84,5.7908Z" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/&gt;
      &lt;path d="M84.7885,54.7323Z" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/&gt;
      &lt;path d="M85.45,55.17l1.6547-1.3236,4.6324-1.1582,3.3091,1.9855-2.4818,3.8053L87.27,60.4642l-2.6472-1.82Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/&gt;
      &lt;path d="M95.2117,54.5079s2.8126-2.3163,2.9783-2.3163,4.9635-.3308,4.9635-.3308l4.7978,3.1434-.3308,4.6327Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/&gt;
      &lt;path d="M86.4429,66.9757" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/&gt;
      &lt;path d="M70.8907,48.7171l.6617,27.63,1.489,13.2361L81.6448,95.87l13.4015,2.978s7.7761-1.82,7.7761-2.1507a23.3375,23.3375,0,0,0-2.3163-2.9783s-6.7833-9.5959-6.9488-9.5959-9.2653-5.1292-9.2653-5.1292Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/&gt;
      &lt;path d="M83.9611,51.0924" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/&gt;
      &lt;path d="M85.2847,55.0042,80.652,72.5419" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/&gt;
      &lt;path d="M107.7859,59.4714,93.5573,84.2889" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/&gt;
      &lt;path d="M93.7227,84.2889l8.2726-8.1072,9.5959-3.3088,3.64-6.6182" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/&gt;
      &lt;path d="M102.1607,75.8509l9.4305-3.1437,3.1437,6.4528-2.6472,4.1362L105.47,85.778s-3.64-3.3091-3.64-3.8053S102.3261,75.6855,102.1607,75.8509Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/&gt;
      &lt;path d="M111.5912,72.8729l6.4528-.4965" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/&gt;
      &lt;path d="M124,79.3254l-2.978.9927,1.3236,1.6544Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/&gt;
    &lt;/g&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>