如何用纯HTML隐藏含SVG的div，CSS启用时恢复显示？

嘿，这个好奇驱动的问题挺有意思的！你的初始方案确实会留下带line-height的空div，我给你几个更优雅的纯HTML方案，完美解决这个问题：

方案一：利用HTML hidden全局属性（推荐） #

这是最符合语义且可靠的方案：

1. 给包含SVG的<div>加上hidden属性——在没有CSS支持（或禁用CSS）的情况下，浏览器默认会把带hidden属性的元素设置为display: none;，整个div和SVG都会被完全隐藏，不会留下任何占位空间。
2. 用CSS覆盖hidden的默认样式，让元素在CSS可用时显示出来。

代码示例：

<div hidden>
  <svg viewBox="0 0 100 100">
    <!-- 你的SVG内容，比如一个简单的圆形 -->
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
</div>

<style>
  /* 当CSS可用时，移除hidden的隐藏效果 */
  div[hidden] {
    display: block !important;
    /* 这里可以添加你需要的其他样式，比如宽高、margin等 */
  }
</style>

这个方案的优势：

• 完全符合HTML语义，hidden属性就是用来标记当前不需要显示的元素
• 禁用CSS时元素彻底隐藏，不会有任何占位（包括你担心的line-height问题）
• CSS生效时能精准恢复显示，兼容性极佳

方案二：默认压缩元素尺寸，CSS重置 #

如果你不想用hidden属性，也可以通过默认设置SVG和div的尺寸为0，再用CSS重置：

<div style="height: 0; overflow: hidden;">
  <svg width="0" height="0" class="my-svg">
    <!-- SVG内容 -->
  </svg>
</div>

<style>
  div[style="height: 0; overflow: hidden;"] {
    height: auto !important;
    overflow: visible !important;
  }
  .my-svg {
    width: auto !important;
    height: auto !important;
    /* 或者设置固定宽高 */
  }
</style>

不过这个方案依赖内联样式，优先级较高，需要用!important覆盖，语义上也不如hidden方案清晰，所以更推荐第一个方案。

内容的提问来源于stack exchange，提问作者Fredrik P