我该如何旋转SVG？

Question

第一张图片现在是我的代码。我的问题是，如果我想旋转整个事物所以它看起来像下面的图像，我会添加什么代码？

https://jsfiddle.net/jw1euh11/

现在的样子。

我想将其转为此

＆＃13;

＆＃13;

<svg width="266" height="266" viewBox="0 0 266 266">

  <text x="100" y="15" fill="red" transform="rotate(44, 10,40)">Play </text>
  <text x="197" y="15" fill="red" transform="rotate(44, 10,40)">Play </text>

 <line x1="264" y1="1" x2="0" y2="1"
    style="stroke: #0059dd; stroke-width: 3;"/>

  <line x1="265" y1="265" x2="265" y2="0"
    style="stroke: #0059dd;stroke-width: 3; "/>

 <line x1="100%" y1="265" x2="0" y2="265"
    style="stroke: #0059dd ; stroke-width: 3;"/>

  <line x1="1" y1="100%" x2="1" y2="0"
    style="stroke:#0059dd;stroke-width: 3; "/>

  <line x1="0" y1="0" x2="100%" y2="100%" 
style="stroke:#0059dd; stroke-width:3" />

  <line x1="0" y1="100%" x2="100%" y2="0"
style="stroke:#0059dd; stroke-width:3"/>

</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用群组<g>...</g>一起轮换。

<svg width="266" height="266" viewBox="0 0 266 266">
<g transform="rotate(-44, 80, 120)">

  <text x="100" y="15" fill="red" transform="rotate(44, 10,40)">Play </text>
  <text x="197" y="15" fill="red" transform="rotate(44, 10,40)">Play </text>

 <line x1="264" y1="1" x2="0" y2="1"
    style="stroke: #0059dd; stroke-width: 3;"/>

  <line x1="265" y1="265" x2="265" y2="0"
    style="stroke: #0059dd;stroke-width: 3; "/>

 <line x1="100%" y1="265" x2="0" y2="265"
    style="stroke: #0059dd ; stroke-width: 3;"/>

  <line x1="1" y1="100%" x2="1" y2="0"
    style="stroke:#0059dd;stroke-width: 3; "/>

  <line x1="0" y1="0" x2="100%" y2="100%" 
style="stroke:#0059dd; stroke-width:3" />

  <line x1="0" y1="100%" x2="100%" y2="0"
style="stroke:#0059dd; stroke-width:3"/>
</g>
</svg>