javascript - Best practice to hide a svg element -


i have many (>100) svg-<g>-elements on screen, , if user hovers on 1 of them, inner img-elements included in <g> should become visible. if user hovers out of <g>, should turn invisible again.

i see there 2 ways of doing this:

  1. insert <img> on every mouseenter , remove on mouseleave.
  2. insert elements on every <g> during initial rendering, make them invisible , turn them visible on mouseenter.

which 1 way go? if #2, whats css property use? found many, including

visibility : hidden; 

and

display : none; 

keep in mind doesn't work in same way,

visibility: hidden; 

conserve space object using, if object size example: width: 250px, height:200px, show blank space.

by other hand:

display:none; 

won't show blank space, object still there @ width:0px height:0px

bye!


Comments

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -