0

jquery.offset always returns 0/0 when applied to an SVG element in chrome.

<div style="margin: 45px;">
  <svg version="1.1" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <g transform="matrix(1,0,0,1,10,10)">
      <path id="zeroPoint" d="M10,5 a5,5 0 0 1 -5,5  l0,-5 zM0,5  a5,5 0 0 1 5,-5  l0,5  zM5,0  a5,5 0 0 1 5,5   l-0.2,0 a 4.8,4.8 0 0 0 -4.8,-4.8 zM5,10 a5,5 0 0 1 -5,-5 l0.2,0  a 4.8,4.8 0 0 0 4.8,4.8   z" transform="matrix(2,0,0,2,-9.71428,-9.71428)"></path>
    </g>
  </svg>
</div>

Calling $('#zeroPoint').offset() in Chrome (at least versions 40 - 52 (cur stable) & 53 dev) returns the erroneous position top: 0, left: 0 whilst Firefox 48, IE 11 & Edge 13 return top: 45.xx, left: 53.xx.

Live example on JSFiddle

Any ideas why that is?

One more thing:
The offset method was working proberly in Chrome in jQuery version <= 2.2.4:
JSFiddle with jQuery v2.2.4

suamikim
  • 5,350
  • 9
  • 40
  • 75
  • Probably related to jQuery not fully supporting SVG [Won’t Fix](https://contribute.jquery.org/wont-fix/): *"jQuery is primarily a library for the HTML DOM, so most problems related to SVG/VML documents or namespaced elements are out of scope. We do try to address problems that "bleed through" to HTML documents, such as events that bubble out of SVG."* – Alexander O'Mara Sep 12 '16 at 12:19
  • @AlexanderO'Mara See my addition above. It was working properly also in Chrome in earlier jQuery versions... – suamikim Sep 12 '16 at 12:26
  • 2
    Use getBoundingClientRect instead – Robert Longson Sep 12 '16 at 12:27
  • 1
    Though it may have worked before, jQuery probably isn't testing against SVG, and probably can't really be expected to necessarily continue support it. I'd recommend using native JS API's or a dedicated SVG library. – Alexander O'Mara Sep 12 '16 at 12:52

0 Answers0