隐藏svg元素的最佳实践

Question

我的屏幕上有很多（> 100）SVG - <g> - 元素，如果用户将鼠标悬停在其中一个元素上，则此<g>中包含的内部img元素应该变为可见。如果用户悬停在<g>之外，他们应该再次隐身。

我看到有两种方法可以做到这一点：

1. 在每个mouseenter上插入<img>并在mouseleave上删除它。
2. 在初始渲染过程中，在每个<g>上插入元素，使它们最初不可见，并在mouseenter上将它们显示。

哪一个是要走的路？ 如果它是＃2，那么CSS属性是什么用的？我找到了许多，包括

visibility : hidden;

和

display : none;

Answer 1

要么会这样做。对于SVG，它们之间没有有效的区别。

有一个例外，那就是它们与<tspan>元素一起使用的时候。如果<tspan>为visibility: hidden，则会留下空白。但dispay: none将完全忽略它。

对于其他所有用途，行为都是相同的，您也可以使用。