title: Rotate svg path around its center ( not the center of the svg )
body: <p>I want to rotate the path around its center but it takes the width and high of the entire svg instead. So is it possible to rotate the path in its own place?</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>.logo {
    margin-left: 100px;
    margin-top: 100px;
  }
  
  .logo svg {
    overflow: visible;
  }
  
  .logo path#g {
    transform-origin: 50% 50%;
    animation: rotation 2s infinite linear;
  }
  
  @keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="logo"&gt;
    &lt;svg width="208" height="70" viewBox="0 0 208 70" fill="none" xmlns="http://www.w3.org/2000/svg"&gt;
            &lt;path d="M95.576 43.0317V20.0997H88.856V49.4997H106.076V43.0317H95.576Z" fill="black"/&gt;
            &lt;path d="M123.062 50.0877C131.504 50.0877 138.35 43.4517 138.35 34.7997C138.35 26.1477 131.504 19.5117 123.062 19.5117C114.62 19.5117 107.774 26.1477 107.774 34.7997C107.774 43.4517 114.62 50.0877 123.062 50.0877ZM123.062 43.5357C118.274 43.5357 114.494 40.0497 114.494 34.7997C114.494 29.5497 118.274 26.0637 123.062 26.0637C127.85 26.0637 131.63 29.5497 131.63 34.7997C131.63 40.0497 127.85 43.5357 123.062 43.5357Z" fill="black"/&gt;
            &lt;path d="M192.416 50.0877C200.858 50.0877 207.704 43.4517 207.704 34.7997C207.704 26.1477 200.858 19.5117 192.416 19.5117C183.974 19.5117 177.128 26.1477 177.128 34.7997C177.128 43.4517 183.974 50.0877 192.416 50.0877ZM192.416 43.5357C187.628 43.5357 183.848 40.0497 183.848 34.7997C183.848 29.5497 187.628 26.0637 192.416 26.0637C197.204 26.0637 200.984 29.5497 200.984 34.7997C200.984 40.0497 197.204 43.5357 192.416 43.5357Z" fill="black"/&gt;
            &lt;path id="g" d="M172.92 33.1197H158.178V38.9997H166.032C164.982 41.8137 162.42 43.5357 158.514 43.5357C152.802 43.5357 149.274 39.8817 149.274 34.8837C149.274 29.7177 152.97 26.0637 157.926 26.0637C161.244 26.0637 163.89 27.5757 165.108 29.5077L170.82 26.2317C168.342 22.2837 163.596 19.5117 157.968 19.5117C149.316 19.5117 142.554 26.3157 142.554 34.8417C142.554 43.2837 149.19 50.0877 158.43 50.0877C166.662 50.0877 172.92 44.6277 172.92 35.6397V33.1197Z" fill="black"/&gt;
            &lt;circle id="Ellipse 1" cx="35.1963" cy="34.7997" r="34.7906" fill="black"/&gt;
         &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>JSFiddle: <a href="https://jsfiddle.net/znc2wd3r/" rel="nofollow noreferrer">https://jsfiddle.net/znc2wd3r/</a></p>