svg - 在 SVG 中旋转对象

Question

我刚刚开始使用 SVG，现在正在尝试旋转对象。

我有初始 Canvas 并创建了自己的拖放功能，因此在 mousedown 时拖动被初始化，而 mouseup 时它停止。我遇到的问题是当我旋转一个对象时，它似乎改变了 x 和 y。当我试图拖动一个对象时，这是可见的。有谁知道如何解决这个问题，使 x 和 y 相对于旋转角度“归一化”？

这是我的代码。

<svg version="1.1" width="900" height="400"><text x="10" y="10" id="text_0" width="200" height="40" transform="rotate(45, 0, 0)">SVG test</text></svg>

谢谢

Answer 1

rotate 参数为您提供旋转的角度和中心(例如，参见 MDN)。那么文本中的 width 和 height 属性呢？这不是 here 标准的一部分.如果您想更改文本的大小，请在样式中使用 font-size。

如果您想围绕其(文本元素的)中心旋转文本，您可以使用以下示例:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" width="900" height="400"  xmlns="http://www.w3.org/2000/svg">
   <text x="10" y="10" id="text_0" transform="rotate(45, 10, 10)" style="dominant-baseline: middle; text-anchor: middle;">
     SVG test 
   </text>
 </svg>