隐藏svg元素的最佳做法

我的屏幕上有许多（> 100）SVG-<g> -elements，如果用户将鼠标悬停在其中一个元素上，则此<g>中包含的内部img元素应该可见。如果用户移出<g>，它们应该再次变为不可见状态。隐藏svg元素的最佳做法

我看到有这样做的方法有两种：

哪一条路要走？如果它是＃2，那么使用什么CSS属性？我发现很多人，包括

visibility : hidden;

和

display : none;

2015-04-29 keno

http://stackoverflow.com/questions/3475119/css-properties-display-vs-visibility :)相关！对于你的情况，我建议'display：none' ..它应该更快，更多的元素。 – Pogrindis

Display none将隐藏该元素和它的占位符。所以检查一下 –

的性能绝对的解决方案＃2 –

请记住，他们不会以同样的方式工作，

visibility: hidden;

节约的对象正在使用的空间，所以如果你的对象尺寸是例如：宽度：250px，高度：200px，将显示一个空白区域。

用另一只手：

display:none;

不会显示空白，你的对象仍然存在，但在宽度：0像素高：0像素

再见！

2015-04-29 22:43:38

这是错误的。 SVG中没有“空间节约”。这是一个HTML的东西。 –

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility这是一个可见性的例子，可能与svg的工作方式不同，通常你不能在SVG中添加一些CSS属性像这样的标签，而是使用svg属性来做到这一点 –

OP正在谈论SVG元素（SVG中的元素）。 SVG元素的行为与HTML不同。 –

要么。当涉及到SVG时，它们之间没有有效的区别。

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

对于其他用途，其行为将是相同的，您可以使用。

2015-04-30 00:43:52

回答