title: Rotating Nested SVG
body: <p>I am using <a href="http://svgjs.com" rel="nofollow noreferrer">SVG.js</a> and trying to make some manipulations with SVG. I was previously working with canvas but I was very disappointed with the quality of the images it was generating so I've decided to use pure SVG.</p>
  
  <p>I managed to change everything into a pure SVG approach, everything except one thing: rotation.</p>
  
  <p>I cannot make it work. I would love to use what the SVG.js library offers, but that didn't work. I also have tried fiddling with the elements inside but also without success.
  The best link I found up to this point was <a href="https://www.noupe.com/development/better-positioning-and-transforming-with-nested-svgs.html" rel="nofollow noreferrer">this one</a> but although he manages to rotate the images separately, it does not show how to rotate everything together (which is my case)</p>
  
  <p><strong>What I want</strong></p>
  
  <p>I want to be able to rotate an SVG image which I've created in Inkscape (fairly simple)</p>
  
  <p><strong>Problem</strong></p>
  
  <p>No rotation at all, through several methods and opinions on the internet.</p>
  
  <p><strong>What I've tried</strong></p>
  
  <ul>
  <li>using the <strong>transform</strong> attribute with <strong>rotate(45)</strong></li>
  <li>using the SVG.js built in method</li>
  <li>reading about how rotation cannot be applied to &lt;g&gt; tag</li>
  <li>reading about how the SVG rotation is different from the CSS in respect to its coordinate system (e.g. <a href="https://css-tricks.com/transforms-on-svg-elements/" rel="nofollow noreferrer">this link from css-tricks</a>)</li>
  </ul>
  
  <p><strong>Example of problem</strong></p>
  
  <p>Here I have a simple SVG of a player which I put as a JS variable. The image is created and moved to the coordinates = (50, 50). Finally I try to rotate it 45 degrees. (Which does not help)</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-js lang-js prettyprint-override"><code>const player = '&lt;svg width="11.214mm" height="6.3195mm" version="1.1" viewBox="0 0 11.214 6.3195" xmlns="http://www.w3.org/2000/svg"&gt;&amp;gt;\n' +
      ' &lt;g transform="translate(-172.04 62.213)"&gt;\n' +
      '  &lt;g transform="matrix(.429 0 0 .429 160.68 -80.101)"&gt;\n' +
      '   &lt;g stroke="#000"&gt;\n' +
      '    &lt;path d="m39.592 42.246c-4.5716 0.02368-12.788-1.0453-12.77 6.7945 0.01784 7.8398 12.788 6.8319 12.788 6.8319s12.667 1.041 12.681-6.9252-8.1273-6.7249-12.699-6.7012z" fill="#ff2a2a" stroke-width=".20436px"/&gt;\n' +
      '    &lt;circle cx="39.556" cy="49.061" r="7" fill="#ffb380" stroke-width=".26458"/&gt;\n' +
      '   &lt;/g&gt;\n' +
      '  &lt;/g&gt;\n' +
      ' &lt;/g&gt;\n' +
      '&lt;/svg&gt;';
  
      if (SVG.supported) {
       const drawArea = SVG('svgDrawArea').size(300, 300);
        
        const group = drawArea.nested();
        group.svg(player);
        group.move(50, 50);
        
        group.transform({ rotation: 45 });
      } else {
          alert('SVG not supported')
      }
      </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#svgDrawArea{
    /* background-color: red; */
    height: 300px;
    width:300px;
    border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.min.js"&gt;&lt;/script&gt;
  &lt;div id="svgDrawArea"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would be happy if someone can explain why the rotation does not work or to point me to somewhere where I can clarify myself on the why!</p>