在 SVG 中旋转对象

Question

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

我有初始画布并创建了我自己的拖放功能，因此在 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属性呢？截至此处，这不是标准的一部分。如果要更改文本的大小，请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>