javascript - Rotating Nested SVG - Stack Overflow

admin管理员组

文章数量:1297047

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 so I've decided to use pure SVG.

I managed to change everything into a pure SVG approach, everything except one thing: rotation.

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 this one but although he manages to rotate the images separately, it does not show how to rotate everything together (which is my case)

What I want

I want to be able to rotate an SVG image which I've created in Inkscape (fairly simple)

Problem

No rotation at all, through several methods and opinions on the internet.

What I've tried

• using the transform attribute with rotate(45)
• using the SVG.js built in method
• reading about how rotation cannot be applied to <g> tag
• reading about how the SVG rotation is different from the CSS in respect to its coordinate system (e.g. this link from css-tricks)

Example of problem

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)

const player = '<svg width="11.214mm" height="6.3195mm" version="1.1" viewBox="0 0 11.214 6.3195" xmlns="">&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.move(50, 50);
      
      group.transform({ rotation: 45 });
    } else {
        alert('SVG not supported')
    }
    

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

<script src=".1.1/jquery.min.js"></script>
<script src=".js/2.6.4/svg.min.js"></script>
<div id="svgDrawArea"></div>

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 so I've decided to use pure SVG.

I managed to change everything into a pure SVG approach, everything except one thing: rotation.

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 this one but although he manages to rotate the images separately, it does not show how to rotate everything together (which is my case)

What I want

I want to be able to rotate an SVG image which I've created in Inkscape (fairly simple)

Problem

No rotation at all, through several methods and opinions on the internet.

What I've tried

• using the transform attribute with rotate(45)
• using the SVG.js built in method
• reading about how rotation cannot be applied to <g> tag
• reading about how the SVG rotation is different from the CSS in respect to its coordinate system (e.g. this link from css-tricks)

Example of problem

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)

const player = '<svg width="11.214mm" height="6.3195mm" version="1.1" viewBox="0 0 11.214 6.3195" xmlns="http://www.w3/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.move(50, 50);
      
      group.transform({ rotation: 45 });
    } else {
        alert('SVG not supported')
    }
    

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

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

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!

• javascript
• svg
• svg.js

Share Improve this question Follow asked May 18, 2018 at 13:38 fditzfditz 8921111 silver badges2929 bronze badges 3

• I can't see any problem. If I execute that snippet, the player is rotated, just as it should. – ccprog Commented May 18, 2018 at 14:23
• interesting... now that you mentioned I have opened other browsers... this seems to be working in FF but not on Chrome. – fditz Commented May 18, 2018 at 15:44
• So it seems that I am looking for a cross-browser solution... – fditz Commented May 18, 2018 at 15:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 12

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.

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/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;
}

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

本文标签： javascriptRotating Nested SVGStack Overflow