拉斐爾對象屬性「x」和「y」是什麼意思？

Question

我認爲這是100％不費吹灰之力，但事實證明，我不知道用Raphael.js創建和操作的svg的屬性意味着什麼。我認爲它們是相對於畫布左上角的座標，但現在我不太確定。

創建畫布（var paper = new Raphael(container,width,height)）和添加的圖像或矩形以它，例如，如果檢索到的「x」和「y」使用attr方法屬性之後（例如object.attr("x")），將它們在0倆都。但是，如果我旋轉該對象，然後再次檢索x和y的值，則這些值不會反映出對象相對於畫布左上角的位置。

有人可以向我解釋這個嗎？

Answer 1

我害怕@ afaf12的回答自滿地只走了一半距離。他絕對正確的是，轉換邏輯出現在給定元素的基本屬性之後，並且不會影響它們，但在應用轉換之後，肯定可以檢索該元素的x和y。您將要使用getBBox方法，像這樣：

var bbox = elem.getBBox(); 
console.log("Transformed coordinates of element are %s,%s", bbox.x, bbox.y); 

請注意，有一些涉及trickiness - 這個返回元素的邊框，這是經常被佔用的空間的一個超集元素 - 所以不能保證返回的點將在元素中。

如果您使用路徑 - 路徑，則會出現另一種替代方法。 getPointAtLength還與變換座標，這樣你就可以在x，y通過調用

var coord = elem.getPointAtLength(0); 
console.log("Transformed coordinates of path are %s,%s", coord.x, coord.y); 

Answer 2

旋轉是一種轉換，它不會更改對象的x和y。 http://raphaeljs.com/reference.html#Element.transform