Best practice to hide a svg element

Question

I do have many (>100) SVG-<g>-elements on my screen, and if the user hovers over one of them, inner img-elements included in this <g> should become visible. If the user hovers out of the <g>, they should turn invisible again.

I see there are two ways of doing this:

Insert the <img> on every mouseenter and remove it on mouseleave.
Insert the elements on every <g> during the initial rendering, make them initially invisible and turn them visible on mouseenter.

Which one is the way to go? If it is #2, whats the CSS property to use? I found many, including

visibility : hidden;

and

display : none;

http://stackoverflow.com/questions/3475119/css-properties-display-vs-visibility :) Related ! For your case i recommend `display:none` .. It should be quicker with more elements. — Pogrindis, Apr 29 '15 at 12:12
Display none will hide the element and the placeholder for it. So check out the performance on that — Callum Linington, Apr 29 '15 at 12:12
See http://stackoverflow.com/questions/24578837/remove-or-hide-svg-element — dekkard, Apr 29 '15 at 22:53

score 0 · Answer 1 · answered Apr 29 '15 at 22:43

0

Keep in mind that they doesn't work in the same way,

visibility: hidden;

Conserve the space that the object is using, so if your object size is for example: Width: 250px, Height:200px, will show a blank space.

By the other hand:

display:none;

won't show the blank space, your object still be there but at Width:0px Height:0px

Bye!

answered Apr 29 '15 at 22:43

Rodrigo Calix

627
1
7
16

This is wrong. There is no "conservation of space" in SVG. That's an HTML thing. – Paul LeBeau Apr 30 '15 at 00:39
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility this is an example of visibility, probably doesn't work in the same way with svg, usually you can't add some css properties to SVG tags like , instead use svg properties to do that – Rodrigo Calix Apr 30 '15 at 00:53
OP is talking about SVG elements (elements inside an SVG). The behaviour of SVG elements is different from HTML. – Paul LeBeau Apr 30 '15 at 01:19
If you want the blank space you might need a container that reserves the space that you need and then you could hide your SVG element https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/visibility – Rodrigo Calix Apr 30 '15 at 02:01

score 0 · Answer 2 · answered Apr 30 '15 at 00:43

Either will do. There is not effective difference between them when it comes to SVG.

There is one exception, and that is when they are used with <tspan> elements. If a <tspan> is visibility: hidden it will leave a gap. But it will be completely ignored with dispay: none.

For every other use, the behaviour will be the same, and you can use either.

Best practice to hide a svg element

2 Answers2