CODEWITHSUNDEEP
jquerysvgjquery-svg
SivaRajini
SivaRajini

Reputation: 7375

SVG offset issue in firefox

In Firefox 12.0 or greater, .offset() and .position() are returning unexpected values when called on SVG (root) elements.

The resulting values are the x-coord of the most left child for the 'left' component and the y-coord of the most top child for the 'top' component.

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

returns un expected value in firefox.

but when i getting the parent offset it gives the correct value (i.e.): 

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

but it is not correct way to do it.

Please refer to this bug report. They replied with:

"Unfortunately we're not planning on fixing bugs relating to SVG any time soon:"

How can I solve this in SVG?

Upvotes: 2

Views: 1846

Answers (2)

mhu
mhu

Reputation: 18041

You can use:

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

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

Upvotes: 0

WebEnthusiast
WebEnthusiast

Reputation: 11

I was facing the same issue, i just created a fake boundary before starting to draw the Raphael diagram, that solved the issue.

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

Upvotes: 1

Related Questions