旋转SVG中的对象

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

我有初始画布，并创建了我自己的拖放功能，所以在拖动鼠标拖动被初始化和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>

由于

来源

2012-02-29 tmutton

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>

来源

2012-02-29 15:20:28 Sirko

width和height属性只是我瞎搞。不幸的是，你的代码不适合我，它与上次的结果相同。根据我的理解，x和y是对象的左上角，但是当对象旋转时，x和y点随着旋转移动。所以风格属性不应该是'左上角'还是等价的？ – tmutton 2012-02-29 15:34:55

你能提供一个包含你的拖放代码的jsfiddle吗？ – Sirko 2012-02-29 15:39:32

在这里，你去http://jsfiddle.net/pKwkj/2/页面上有很多垃圾，因为我只是测试的东西。在页面加载时，单击页面左上角的文本链接，您将看到一些文本出现在屏幕左侧（可拖动）。添加文本对象的点击事件是$（'。add.text'）。点击 – tmutton 2012-02-29 15:51:08

旋转SVG中的对象

回答

相关问题