隐藏 svg 元素的最佳实践答案

【问题标题】：Best practice to hide a svg element隐藏 svg 元素的最佳实践
【发布时间】：2015-07-08 17:12:39
【问题描述】：

我的屏幕上确实有许多 (>100) 个 SVG-<g> 元素，如果用户将鼠标悬停在其中一个上，则此 <g> 中包含的内部 img 元素应该变得可见。如果用户将鼠标悬停在<g> 之外，他们应该会再次变得不可见。

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

哪一个是要走的路？如果是#2，使用什么 CSS 属性？我找到了很多，包括

visibility : hidden;

和

display : none;

【问题讨论】：

stackoverflow.com/questions/3475119/… :) 相关！对于您的情况，我推荐display:none .. 使用更多元素应该会更快。
Display none 将隐藏元素及其占位符。所以看看那方面的表现
绝对解决方案#2
见stackoverflow.com/questions/24578837/remove-or-hide-svg-element

【解决方案1】：

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

visibility: hidden;

保留对象正在使用的空间，因此如果您的对象大小为例如：宽度：250px，高度：200px，会显示一个空格。

另一方面：

display:none;

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

再见！

【讨论】：

这是错误的。 SVG 中没有“空间守恒”。那是 HTML 的东西。
w3schools.com/cssref/tryit.asp?filename=trycss_visibility 这是一个可见性的例子，可能与 svg 的工作方式不同，通常你不能将一些 css 属性添加到像这样的 SVG 标签，而是使用 svg属性来做到这一点
OP 讨论的是 SVG 元素（SVG 中的元素）。 SVG 元素的行为与 HTML 不同。
如果你想要空白空间，你可能需要一个容器来保留你需要的空间，然后你可以隐藏你的 SVG 元素developer.mozilla.org/en-US/docs/Web/SVG/Attribute/visibility

【解决方案2】：

两者都可以。就 SVG 而言，它们之间没有有效的区别。

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

对于其他所有用途，行为将是相同的，您可以使用其中任何一种。

【讨论】：