为什么 jquery-ui 的扩展 position() 方法不能与 SVG 元素一起使用？答案

【问题标题】：Why isn't jquery-ui's extended position() method working with SVG elements?为什么 jquery-ui 的扩展 position() 方法不能与 SVG 元素一起使用？
【发布时间】：2012-10-24 16:54:54
【问题描述】：

jQuery UI 用its own 覆盖了jQuery 的position 方法，正如您在this fiddle 中看到的那样，我可以很容易地在<div> 的右上角显示一个图标：

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

但是，对于 SVG 元素（例如 <rect>），我会遇到意外的行为。例如，正如您在这个测试用例中看到的那样，图标显示在左上角，而不是右上角；如果您改用“左上角”来尝试，则图标位于屏幕外。

我已经尽我所能搜索了这个网站和谷歌，但我找不到 jQuery UI 的 position 方法不能用于 SVG 元素的参考。

这是怎么回事？

【问题讨论】：

标签： jquery jquery-ui svg position

【解决方案1】：

jQuery 不适合使用 SVG，尤其是在处理位置时。在 SVG 中，您可以拥有旋转、缩放、变换矩阵和各种疯狂的东西。如果将矩形旋转 45 度会怎样……“右上”或“下”是什么意思？

http://jsfiddle.net/Qjmkc/

【讨论】：

我猜我希望这些位置的语义与相关元素的边界框相关。这在“标准”情况下按预期工作，而在“奇怪”情况下至少是确定性的。这不比我在这里看到的看似随意的行为更好吗？
这很有趣，但不是那么相关，因为我们在这里讨论的是 jQuery UI，而不是 jQuery。为了清楚起见，我理解并完全接受 jQuery UI 的 position 方法的行为，在 SVG 元素（例如 <rect>）被定位的情况下，将是未定义的，但我我没有看到定位非 SVG 元素（例如 <span>）相对于要破坏的 SVG 元素的任何原因。
嘿伙计，这东西不工作不是我的错……我不是你的敌人。但是混合 html 和 svg ......那是个噩梦。使用 jQuery 进行 svg 操作也是如此（或 jQuery UI，无论如何......它仍然建立在 jQuery 之上，“这个插件扩展了 jQuery 的内置 .position() 方法” - 根据文档）。
也许这只是一个术语问题，但我不打算以任何方式操纵任何 SVG。我只是希望这个函数可以找出页面上已经渲染的 SVG 元素的位置，这似乎不会比任何其他元素更难。谢谢你的帮助。