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属性呢？这不是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>

在SVG中旋转对象

1 个答案: