Why doesn't jquery-ui extended position () method work with SVG elements?

Question

jQuery UI overrides the jQuery position method with its own , which, as you can see in this fiddle , allows me to easily display the icon in the upper right corner of the <div> :

 icon.position({ my: "right top", at: "right top", of: "div" }); 

However, in the case of SVG elements (e.g. <rect> ), I get unexpected behavior. For example, as you can see in this case, the icon is displayed at the top left, and not top right; if you try it with the "upper left", the icon will be placed off the screen.

I searched this site and Google, as far as I could, but did not find a link to the jQuery UI position method that does not work with SVG elements.

What's going on here?

Answer 1

jQuery not very good for working with SVG, especially when working with positions. In SVG, you can have rotation, scaling, a transformation matrix, and all kinds of crazy things. What if the rectangle rotates at a 45 degree angle ... what will the “upper right” or “lower” mean?

http://jsfiddle.net/Qjmkc/