Javascript 隐藏svg元素的最佳实践

我的屏幕上确实有许多（>100）SVG-

-元素，如果用户将鼠标悬停在其中一个元素上，则此

中包含的内部img元素应该可见。如果用户将鼠标悬停在

之外，则它们应再次变为不可见

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

在每个鼠标指针上插入

，然后在鼠标指针上移除

在初始渲染期间，在每个

上插入元素，使它们最初不可见，然后在鼠标上显示它们 哪一条路走？ 如果是#2，那么CSS属性将使用什么？我发现很多，包括

visibility : hidden;

及

---

请记住，它们的工作方式不同

visibility: hidden;

保留对象正在使用的空间，因此如果对象大小为 例如：宽度：250px，高度：200px，将显示空白

另一方面：

display:none;

不会显示空白，您的对象仍然在那里，但宽度：0px高度：0px

---

再见

两者都可以。在SVG方面，它们之间没有有效的区别

有一个例外，那就是当它们与

元素一起使用时。如果

是

可见性：隐藏的
，则会留下一个间隙。但是它将被
dispay:none
完全忽略

对于其他每次使用，行为都是相同的，您可以使用任何一种。
：）相关！对于您的情况，我建议
display:none
。。使用更多的元素应该会更快。显示无将隐藏元素及其占位符。因此，请查看该解决方案的性能，看这是错误的。SVG中没有“空间守恒”。这是一个HTML的东西。这是一个可视性的例子，可能与svg的工作方式不同，通常不能将一些css属性添加到svg标记中，例如，使用svg属性来实现这一点Op谈论的是svg元素（svg中的元素）。SVG元素的行为与HTML不同。如果你想要空白空间，你可能需要一个容器来保留你需要的空间，然后你可以隐藏你的SVG元素。
display:none;