javascript - Detecting Mouse Events on Multiple Overlapping SVG Elements -


i'm trying detect mousemove events on partially overlapping svg elements, in image

enter image description here

fiddle

<svg>     <rect id="red"    x=10 y=10 width=60 height=60 style="fill:#ff0000" />     <rect id="orange" x=80 y=10 width=60 height=60 style="fill:#ffcc00" />     <rect id="blue"   x=50 y=30 width=60 height=60 style="fill:#0000ff; fill-opacity: 0.8" /> </svg>  $('rect').on('mousemove', function() {     log(this.id); });

now, when hovering mouse on blue/red intersection i'd detect mouse events on both elements, , same blue/orange combo. can see in logs, in cases event fired blue box on top.

this has pointer-events, can red , orange elements fire event while hovering blue element setting blue element's pointer-events none. don't events blue box, not viable option either.

i use whichever library solves problem. looked @ event bubbling in this d3 example, works elements nested in dom. have lots of independent elements may overlap lots of other elements , can therefore not structure dom way.

i'm guessing last resort find elements @ current mouse position, , manually firing events. therefore, looked @ document.elementfrompoint(), yield 1 element (and may not work in svg?). found jquerypp function within, finds elements @ given position, see here. example looks great, except it's divs , not inside svg. when replacing divs svg rectangle elements, fiddle seems break.

what do?!

the great comments here gave me answer: it's possible propagate event underlying elements manually finding them using getintersectionlist() @ cursor positon.

$('svg').on('mousemove', function(evt) {     var root = $('svg')[0];     var rpos = root.createsvgrect();     rpos.x = evt.clientx;     rpos.y = evt.clienty;     rpos.width = rpos.height = 1;     var list = root.getintersectionlist(rpos, null);      for(var = 0; < list.length; i++)     {         if(list[i] != evt.target)         {             $(list[i]).mousemove();         }     } });

working example: http://jsfiddle.net/michaschwab/w0wufbtn/6/

if other listeners need original event object, check out http://jsfiddle.net/michaschwab/w0wufbtn/13/.

thanks lot!!


Comments

Post a Comment

Popular posts from this blog

cakephp - simple blog with croogo -

i not problem, made simple blog in croogo, problem is not adding or modifying or delete, because arabic language ?? function add in controller `public function admin_add() { $this->set('title_for_layout', __('add part')); if (!empty($this->request->data)) { $this->part->create(); if ($this->part->save($this->request->data)) { $this->session->setflash(__('the part has been saved'), 'default', array('class' => 'success')); $this->redirect(array('action' => 'index'));//, $this->part->id)); } else { $this->session->setflash(__('the part not saved. please, try again.'), 'default', array('class' => 'error')); } } }` => model `class part extends appmodel { public $name = 'part'; var $belongst...
Read more

How to group boxplot outliers in gnuplot -

i have large set of data points. try plot them boxplot, of outliers exact same value , represented on line beside each other. found how set horizontal distance between outliers in gnuplot boxplot , doesn't much, apparently not possible. is possible group outliers together, print 1 point , print number in brackets beside indicate how many points there are? think make more readable in graph. for information, have 3 boxplots 1 x value , times 6 in 1 graph. using gnuplot 5 , played around pointsize, doesn't reduce distance anymore. hope can help! edit: set terminal pdf set output 'dat.pdf' file0 = 'dat1.dat' file1 = 'dat2.dat' file2 = 'dat3.dat' set pointsize 0.2 set notitle set xlabel 'x' set ylabel 'y' header = system('head -1 '.file0); n = words(header) set xtics ('' 1) set [i=1:n] xtics add (word(header, i) i) set style data boxplot plot file0 using (1-0.25):1:(0.2) boxplot lw 2 lc rgb '#8b0000...
Read more

bash - Performing variable substitution in a string -

i have string contains use of variable, , i'd substitute variable's value string. right best have is #!/bin/bash foo='$name; echo bar' name="the name" expanded="$(eval echo "$foo")" echo "$expanded" which has obvious defects: prints the name bar while i'd print the name; echo bar instead of eval can bash's regex matching bash's string replacement: foo='$name; echo bar' name="the name" [[ "$foo" =~ \$([[:alnum:]]+) ]] && s="${!bash_rematch[1]}" && expanded="${foo/\$${bash_rematch[1]}/$s}" echo "$expanded" name; echo bar
Read more