隐藏svg元素的最佳做法

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:

1. Insert the <img> on every mouseenter and remove it on mouseleave.
2. 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;

Answer 1

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!

Answer 2

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.