Question

我正在使用SVG.js并尝试使用SVG进行一些操作。我之前使用的是canvas，但我对它产生的图像质量非常失望，所以我决定使用纯SVG。

我设法将所有内容都改为纯SVG方法，除了一件事之外的一切：旋转。

我不能让它发挥作用。我很想使用SVG.js库提供的功能，但这并不起作用。我也试过摆弄里面的元素，但也没有成功。到目前为止我发现的最佳链接是this one但是虽然他设法单独旋转图像，但它没有显示如何将所有内容一起旋转（这是我的情况）

我想要什么

我希望能够旋转我在Inkscape中创建的SVG图像（非常简单）

问题

根本没有轮换，通过互联网上的几种方法和意见。

我尝试了什么

将转换属性与 rotate（45）
使用内置方法的SVG.js
阅读关于如何不能将旋转应用于＆lt; g＆gt;标签
阅读SVG旋转与CSS坐标系的不同之处（例如this link from css-tricks）

问题示例

这里我有一个简单的玩家SVG，我把它作为JS变量。创建图像并移动到坐标=（50,50）。最后我尝试将它旋转45度。（这没有帮助）

＆＃13;

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.move(50, 50);
      
      group.transform({ rotation: 45 });
    } else {
        alert('SVG not supported')
    }

＆＃13;

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

＆＃13;

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

＆＃13;

如果有人可以解释为什么轮换不起作用或者指向某个我可以澄清原因的地方，我会很高兴！

Answer 1

您的问题是由于在SVG 1.1中，<svg>元素不允许transform属性。现在允许在SVG 2中使用，但到目前为止只有Firefox实现了它。 Chrome还没有。

解决方案是首先附加一个组，然后将SVG放入该组中。然后，您可以转换该组，它将在两种浏览器中都有效。

正如@noob在答案中建议的那样。如果你愿意，请随时接受他们的回答。

Answer 2

抱歉，只有一个解决方案，但没有解释（旋转svg路径有我自己的问题，我知道你的痛苦）

我用过

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

＆＃13;

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')
    }

＆＃13;

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

＆＃13;

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

＆＃13;

旋转嵌套SVG

2 个答案: