How to attach hoverIntent to paths in an embedded svg document?

Question

I have an svg object in an html page like this

<object id="map" data="img/map_2008.svg" type="image/svg+xml" onload="displayStats();" ></object>

with paths that I would like to attach hoverIntent to. However hoverIntent requires the use of a jQuery selector. How would I go about attaching hoverIntent to all of the paths in the svg document?

See this answer http://stackoverflow.com/a/6794343/109374. – Erik Dahlström Jun 11 '12 at 09:13 — Erik Dahlström, Jun 11 '12 at 09:13

score 0 · Answer 1 · answered Jun 10 '12 at 21:26

attaching directly to an svg on pageload won't work so well, however creative use of the .on() event registration, and selectors for underlying elements of the svg.

javascript

$(function(){
$("#map").on({
  "mouseenter":function(event){},
  "mouseout":function(event){}},"svg element based selector",null);
});

html

<object id="map" data="img/map_2008.svg" type="image/svg+xml" onload="displayStats();" >
  <svg>
   <element>
     <based><selector>hello</selector></based>
   </element>
  </svg>
</object>

How to attach hoverIntent to paths in an embedded svg document?

1 Answers1

javascript

html