offsetParent and svg element problem

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

offsetParent and svg element problem

Post by shmerl »

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.
User avatar
Frenzie
Posts: 2135
Joined: May 5th, 2004, 10:40 am
Location: Belgium
Contact:

Re: offsetParent and svg element problem

Post by Frenzie »

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
Contact:

Re: offsetParent and svg element problem

Post by longsonr »

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: 353
Joined: February 18th, 2008, 1:08 pm

Re: offsetParent and svg element problem

Post by shmerl »

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
Post Reply