Firefox中的SVG偏移问题答案

【问题标题】：SVG offset issue in firefoxFirefox中的SVG偏移问题
【发布时间】：2013-12-19 00:23:25
【问题描述】：

在 Firefox 12.0 或更高版本中，.offset() 和 .position() 在 SVG（根）元素上调用时会返回意外值。

结果值是“left”组件的最左边子元素的 x 坐标和“top”组件的最顶部子元素的 y 坐标。

$(this.SvgObject).offset().left / $(this.SvgObject).offset().top

在 Firefox 中返回非预期值。

但是当我得到父偏移量时，它会给出正确的值（即）：

$(this.SvgObject).parent().offset().left

但这不是正确的做法。

请参考this bug report。他们回答说：

“很遗憾，我们不打算很快修复与 SVG 相关的错误：”

如何在 SVG 中解决这个问题？

【问题讨论】：

如果您的根 svg 元素有一个 viewBox，那么您的期望可能不正确，而不是 Firefox 或 jquery 中的错误。不过，您还没有向我们展示 SVG，也没有告诉我们您期望从中获得什么数字。
Robert> 对 jquery 最轻松的期望是在所有浏览器中都有相同的结果（错误或正确），但这里显然不是这种情况。 Chrome 和 FF 返回不同的东西。

标签： jquery svg jquery-svg

【解决方案1】：

我遇到了同样的问题，我只是在开始绘制拉斐尔图之前创建了一个假边界，从而解决了这个问题。

// adding following rect just to set the boundary of svg element (firefox)
paper.rect(0,0,paperWidth,paperHeight,0).attr({stroke: "#fff"});

【讨论】：

【解决方案2】：

你可以使用：

var svg = $(this.SvgObject),
    po = svg.offsetParent().offset(),

    left = po.left + parseInt(svg.css("left"), 10),
    top = po.top + parseInt(svg.css("top"), 10);

【讨论】：