MozillaZine

offsetParent and svg element problem

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
shmerl
 
Posts: 351
Joined: February 18th, 2008, 1:08 pm

Post Posted June 23rd, 2010, 3:32 pm

Can anyone please explain why offsetParent property doesn't work in the following example?

Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <title>SVG element test</title>
   <script type="text/javascript">
   window.onload = function()
   {
      alert(document.getElementById("svg_elem").offsetParent);
   }
   </script>
</head>

<body>
SVG element test:

<div id="svg_wrapper">
   <svg id="svg_elem" xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:600px; height:400px;"/>
</div>
</body>
</html>


On loading, offsetParent for svg_elem is reported as undefined. I guess it's because svg is using a different namespace but the original problem really is, how to get a relative offset in an svg element, based on mouse event. I thought to do it using the absolute cursor position which comes from mouse event and offsetParent, offsetTop etc. (as described here: http://www.quirksmode.org/js/findpos.html ) but they don't work at all for an <svg> which is defined within xhtml. So is there another way to do it?

Thanks.

Frenzie

User avatar
 
Posts: 2036
Joined: May 5th, 2004, 10:40 am
Location: Belgium

Post Posted June 24th, 2010, 1:01 am

Works in Presto and Webkit. Looks like a bug to me.
Intelligent alien life does exist, otherwise they would have contacted us.

longsonr
 
Posts: 49
Joined: June 29th, 2007, 7:26 am

Post Posted June 24th, 2010, 2:31 am

shmerl wrote:Can anyone please explain why offsetParent property doesn't work in the following example


SVG elements do not have an offsetParent property. I suspect you want getScreenCTM or getCTM depending on your use case. http://www.w3.org/TR/SVG/types.html#__s ... le__getCTM

Best regards

Robert.

shmerl
 
Posts: 351
Joined: February 18th, 2008, 1:08 pm

Post Posted June 24th, 2010, 8:44 pm

longsonr wrote:SVG elements do not have an offsetParent property. I suspect you want getScreenCTM or getCTM depending on your use case.


Thanks a lot! This solved my problem. For example, to get cursor coordinates within an SVG one can use:

Code: Select all
function get_mouse_point(evt, svg_elem)
{
   var matrix = svg_elem.getScreenCTM();
   var point = svg_elem.createSVGPoint();
   point.x = evt.clientX;
   point.y = evt.clientY;
   point = point.matrixTransform(matrix.inverse());
   return point;
}

And then just use point.x and point.y

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 3 guests