Rotating Nested Svg

I am using SVG.js 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

Solution 1:

Your problem is due to the fact that, in SVG 1.1, the <svg> element did not allow the transform attribute. It is now allowed in SVG 2, but only Firefox has implemented that so far. Chrome has not yet.

The solution is to append a group first, then put the SVG in that group. You can then transform that group instead, and it will work in both browsers.

Just as @noob has suggested in their answer. Feel free to accept their answer if you like.

Solution 2:

sorry, only a solution, but no explanation (having my own problems with rotating svg paths, I know your pain)

I used

group.transform({ x: 50, y:50});
group.transform({ rotation: 45 });

const player = '<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;\n' +
    ' <g transform="translate(-172.04 62.213)">\n' +
    '  <g transform="matrix(.429 0 0 .429 160.68 -80.101)">\n' +
    '   <g stroke="#000">\n' +
    '    <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"/>\n' +
    '    <circle cx="39.556" cy="49.061" r="7" fill="#ffb380" stroke-width=".26458"/>\n' +
    '   </g>\n' +
    '  </g>\n' +
    ' </g>\n' +
    '</svg>';

    if (SVG.supported) {
    	const drawArea = SVG('svgDrawArea').size(300, 300);
      
      const group = drawArea.nested();
      group.svg(player);
      
     // group.rotate(45);//group.move(50, 50);
      group.transform({ x: 50, y:50});
      group.transform({ rotation: 45 });
    } else {
        alert('SVG not supported')
    }
    

#svgDrawArea{
  /* background-color: red; */height: 300px;
  width:300px;
  border: 1px solid black;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.min.js"></script><divid="svgDrawArea"></div>