title: SVG Animation rotate group around its center
body: <p>I have a svg image that contains a circle group and a text group. The circle group consists of multiple dots. This Circle group should rotate around its circle center, but it keeps rotating around the svg's top left corner. To solve this issue I have searched everywhere, but I was not able to change the rotation center of that circle without placing the circle group at a totally wrong position.</p>
  
  <p>So my question is: How can I define the rotation center of a svg image group without changing the groups position?</p>
  
  <p>This is the code I'm using: <a href="https://jsfiddle.net/1pe2c837/1/" rel="noreferrer">https://jsfiddle.net/1pe2c837/1/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
   width: 50%;
  }
  
  /* Rotate around the circle center */
  
  #Circleelement {
      -webkit-animation-name: rotate; 
      -webkit-animation-duration: 2s; 
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -moz-animation-name: rotate; 
      -moz-animation-duration: 2s; 
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: linear;
      animation-name: rotate; 
      animation-duration: 2s; 
      animation-iteration-count: infinite;
      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);}
  }
  
  
  
  
  
  /* _x31_ */
  #_x31_, #_x32_7, #_x33_1, #_x31_3 {
      -webkit-animation: flickerAnimation 3s infinite;
      -moz-animation: flickerAnimation 3s infinite;
      -o-animation: flickerAnimation 3s infinite;
      animation: flickerAnimation 3s infinite;
   animation-delay: 0s;
      -webkit-animation-delay: 0s;
      -moz-animation-delay: 0s;
      -o-animation-delay: 0s; 
  }
  
  @keyframes flickerAnimation {
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-o-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-moz-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-webkit-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  
  /* _x32_ */
  #_x32_, #_x32_8, #_x32_3, #_x31_0 {
   animation: flickerAnimation 9s infinite;
      -webkit-animation: flickerAnimation 9s infinite;
      -moz-animation: flickerAnimation 9s infinite;
      -o-animation: flickerAnimation 9s infinite;
      animation-delay: 0.5s;
      -webkit-animation-delay: 0.5s;
      -moz-animation-delay: 0.5s;
      -o-animation-delay: 0.5s;    
  }
  
  @keyframes flickerAnimation {
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-o-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-moz-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-webkit-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  
  /* _x3_ */
  #_x33_, #_x33_2, #_x32_5, #_x31_7 {
      -webkit-animation: flickerAnimation 13s infinite;
      -moz-animation: flickerAnimation 13s infinite;
      -o-animation: flickerAnimation 13s infinite;
      animation: flickerAnimation 13s infinite;
   animation-delay: 0.75s;
      -webkit-animation-delay: 0.75s;
      -moz-animation-delay: 0.75s;
      -o-animation-delay: 0.75s; 
  }
  
  @keyframes flickerAnimation {
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-o-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-moz-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-webkit-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  
  /* _x34_ */
  #_x34_, #_x32_4, #_x33_6, #_x33_5, #_x31_5 {
      -webkit-animation: flickerAnimation 23s infinite;
      -moz-animation: flickerAnimation 23s infinite;
      -o-animation: flickerAnimation 23s infinite;
      animation: flickerAnimation 23s infinite;
   animation-delay: 0s;
      -webkit-animation-delay: 0s;
      -moz-animation-delay: 0s;
      -o-animation-delay: 0s; 
  }
  
  @keyframes flickerAnimation {
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-o-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-moz-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-webkit-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  
  /* _x35_ */
  #_x35_, #_x32_2, #_x33_0, #_x31_9 {
      -webkit-animation: flickerAnimation 15s infinite;
      -moz-animation: flickerAnimation 15s infinite;
      -o-animation: flickerAnimation 15s infinite;
      animation: flickerAnimation 15s infinite;
   animation-delay: 1s;
      -webkit-animation-delay: 1s;
      -moz-animation-delay: 1s;
      -o-animation-delay: 1s; 
  }
  
  @keyframes flickerAnimation {
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-o-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-moz-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-webkit-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  
  /* _x36_ */
  #_x36_, #_x32_0, #_x32_9, #_x31_1 {
      -webkit-animation: flickerAnimation 18s infinite;
      -moz-animation: flickerAnimation 18s infinite;
      -o-animation: flickerAnimation 18s infinite;
      animation: flickerAnimation 18s infinite;
   animation-delay: 1.5s;
      -webkit-animation-delay: 1.5s;
      -moz-animation-delay: 1.5s;
      -o-animation-delay: 1.5s; 
  }
  
  @keyframes flickerAnimation {
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-o-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-moz-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-webkit-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  
  /* _x37_ */
  #_x37_, #_x33_4, #_x31_2 {
      -webkit-animation: flickerAnimation 6s infinite;
      -moz-animation: flickerAnimation 6s infinite;
      -o-animation: flickerAnimation 6s infinite;
      animation: flickerAnimation 6s infinite;
   animation-delay: 0.5s;
      -webkit-animation-delay: 0.5s;
      -moz-animation-delay: 0.5s;
      -o-animation-delay: 0.5s; 
  }
  
  @keyframes flickerAnimation {
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-o-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-moz-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-webkit-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  
  /* _x38_ */
  #_x38_, #_x32_6, #_x31_6 {
      -webkit-animation: flickerAnimation 10s infinite;
      -moz-animation: flickerAnimation 10s infinite;
      -o-animation: flickerAnimation 10s infinite;
      animation: flickerAnimation 10s infinite;
   animation-delay: 0.2s;
      -webkit-animation-delay: 0.2s;
      -moz-animation-delay: 0.2s;
      -o-animation-delay: 0.2s; 
  }
  
  @keyframes flickerAnimation {
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-o-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-moz-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-webkit-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  
  /* _x39_ */
  #_x39_, #_x33_3, #_x31_4 {
      -webkit-animation: flickerAnimation 25s infinite;
      -moz-animation: flickerAnimation 25s infinite;
      -o-animation: flickerAnimation 25s infinite;
      animation: flickerAnimation 25s infinite;
   animation-delay: 0.8s;
      -webkit-animation-delay: 0.8s;
      -moz-animation-delay: 0.8s;
      -o-animation-delay: 0.8s; 
  }
  
  @keyframes flickerAnimation {
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-o-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-moz-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-webkit-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  
  /* _x31_0 */
  #_x31_0, #_x32_1, #_x31_8 {
      -webkit-animation: flickerAnimation 30s infinite;
      -moz-animation: flickerAnimation 30s infinite;
      -o-animation: flickerAnimation 30s infinite;
      animation: flickerAnimation 30s infinite;
   animation-delay: 2s;
      -webkit-animation-delay: 2s;
      -moz-animation-delay: 2s;
      -o-animation-delay: 2s; 
  }
  
  @keyframes flickerAnimation {
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-o-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-moz-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }
  @-webkit-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0; }
    100% { opacity:1; }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;svg version="1.1" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"&gt;
  &lt;g id="Circleelement" transform="translate(150 170) rotate(45) translate(-150 -170)"&gt;
   &lt;circle id="_x31_" fill="#000000" stroke-miterlimit="10" cx="242.5" cy="81.5" r="11.1"&gt;  &lt;/circle&gt;
   &lt;circle id="_x32_" fill="#000000" stroke-miterlimit="10" cx="277.1" cy="87" r="10.8"/&gt;
   &lt;circle id="_x33_" fill="#000000" stroke-miterlimit="10" cx="307.5" cy="102" r="10.5"/&gt;
   &lt;circle id="_x34_" fill="#000000" stroke-miterlimit="10" cx="332.1" cy="124.9" r="10.2"/&gt;
   &lt;circle id="_x35_" fill="#000000" stroke-miterlimit="10" cx="349.1" cy="154.2" r="9.9"/&gt;
   &lt;circle id="_x36_" fill="#000000" stroke-miterlimit="10" cx="357" cy="188.1" r="9.6"/&gt;
   &lt;circle id="_x37_" fill="#000000" stroke-miterlimit="10" cx="354.3" cy="223.4" r="9.4"/&gt;
   &lt;circle id="_x38_" fill="#000000" stroke-miterlimit="10" cx="341.7" cy="255.1" r="9.1"/&gt;
   &lt;circle id="_x39_" fill="#000000" stroke-miterlimit="10" cx="320.7" cy="281.4" r="8.8"/&gt;
   &lt;circle id="_x31_0" fill="#000000" stroke-miterlimit="10" cx="293.1" cy="300.6" r="8.5"/&gt;
   &lt;circle id="_x31_1" fill="#000000" stroke-miterlimit="10" cx="260.3" cy="311.1" r="8.2"/&gt;
   &lt;circle id="_x31_2" fill="#000000" stroke-miterlimit="10" cx="224.7" cy="311.3" r="7.9"/&gt;
   &lt;circle id="_x31_3" fill="#000000" stroke-miterlimit="10" cx="191.8" cy="301.2" r="7.6"/&gt;
   &lt;circle id="_x31_4" fill="#000000" stroke-miterlimit="10" cx="164" cy="282.3" r="7.3"/&gt;
   &lt;circle id="_x31_5" fill="#000000" stroke-miterlimit="10" cx="142.7" cy="256.3" r="7"/&gt;
   &lt;circle id="_x31_6" fill="#000000" stroke-miterlimit="10" cx="129.7" cy="224.7" r="6.8"/&gt;
   &lt;circle id="_x31_7" fill="#000000" stroke-miterlimit="10" cx="126.6" cy="189.4" r="6.5"/&gt;
   &lt;circle id="_x31_8" fill="#000000" stroke-miterlimit="10" cx="134" cy="155.5" r="6.2"/&gt;
   &lt;circle id="_x31_9" fill="#000000" stroke-miterlimit="10" cx="150.7" cy="126.1" r="5.9"/&gt;
   &lt;circle id="_x32_0" fill="#000000" stroke-miterlimit="10" cx="174.9" cy="102.9" r="5.6"/&gt;
   &lt;circle id="_x32_1" fill="#000000" stroke-miterlimit="10" cx="205.2" cy="87.5" r="5.3"/&gt;
   &lt;circle id="_x32_2" fill="#000000" stroke-miterlimit="10" cx="242.6" cy="123.6" r="10.4"/&gt;
   &lt;circle id="_x32_3" fill="#000000" stroke-miterlimit="10" cx="282.5" cy="136.5" r="9.7"/&gt;
   &lt;circle id="_x32_4" fill="#000000" stroke-miterlimit="10" cx="308.8" cy="168" r="9.1"/&gt;
   &lt;circle id="_x32_5" fill="#000000" stroke-miterlimit="10" cx="314" cy="210.3" r="8.4"/&gt;
   &lt;circle id="_x32_6" fill="#000000" stroke-miterlimit="10" cx="261.1" cy="269.4" r="7.1"/&gt;
   &lt;circle id="_x32_7" fill="#000000" stroke-miterlimit="10" cx="218.3" cy="268.8" r="6.5"/&gt;
   &lt;circle id="_x32_8" fill="#000000" stroke-miterlimit="10" cx="184.1" cy="246.1" r="5.8"/&gt;
   &lt;circle id="_x32_9" fill="#000000" stroke-miterlimit="10" cx="167.1" cy="208.3" r="5.2"/&gt;
   &lt;circle id="_x33_0" fill="#000000" stroke-miterlimit="10" cx="200.5" cy="135.4" r="3.9"/&gt;
   &lt;circle id="_x33_1" fill="#000000" stroke-miterlimit="10" cx="242.2" cy="164.1" r="5.4"/&gt;
   &lt;circle id="_x33_2" fill="#000000" stroke-miterlimit="10" cx="271.9" cy="181.8" r="4.8"/&gt;
   &lt;circle id="_x33_3" fill="#000000" stroke-miterlimit="10" cx="271.5" cy="216.9" r="4.1"/&gt;
   &lt;circle id="_x33_4" fill="#000000" stroke-miterlimit="10" cx="241.3" cy="233.9" r="3.5"/&gt;
   &lt;circle id="_x33_5" fill="#000000" stroke-miterlimit="10" cx="211.4" cy="216.5" r="2.8"/&gt;
   &lt;circle id="_x33_6" fill="#000000" stroke-miterlimit="10" cx="211.4" cy="181.4" r="2.2"/&gt;
  &lt;/g&gt;
  &lt;g id="Name"&gt;
   &lt;text transform="matrix(1 0 0 1 44 439.7)" font-family="'Gotham-Book'" font-size="54"&gt;S O M E T E X T&lt;/text&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>