CSS 请问为何`visibility: hidden`不生效?

如题,我使用visibility: hidden隐藏元素地时候不能生效:

<svg id="canvas" viewBox="0,0,32,32">
  <g transform="translate(0.5,0.5)" style="visibility: visible;">
    <path d="M 15.99 28.08 C 16.98 27.06 22.65 21.22 26.2 17.58 C 29.38 14.31 29.31 9.55 26.42 6.6 C 23.53 3.64 18.86 3.65 15.99 6.62 C 13.11 3.65 8.44 3.64 5.56 6.59 C 2.67 9.55 2.6 14.31 5.78 17.58 C 9.32 21.22 15 27.06 15.99 28.08 Z" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="all"></path>
  </g>
</svg>

<div id="canvas-2">
  <svg viewBox="0,0,32,32">
    <g transform="translate(0.5,0.5)" style="visibility: visible;">
      <path d="M 15.99 28.08 C 16.98 27.06 22.65 21.22 26.2 17.58 C 29.38 14.31 29.31 9.55 26.42 6.6 C 23.53 3.64 18.86 3.65 15.99 6.62 C 13.11 3.65 8.44 3.64 5.56 6.59 C 2.67 9.55 2.6 14.31 5.78 17.58 C 9.32 21.22 15 27.06 15.99 28.08 Z" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="all"></path>
    </g>
  </svg>
</div>
#canvas {
  visibility: hidden;
  width: 42px;
  height: 42px;
}

#canvas-2 {
  visibility: hidden;
  > svg {
    width: 42px;
    height: 42px;
  }
}

链接地址:https://codepen.io/hungtcs/pe...

阅读 4.9k
1 个回答

后代中有visibility: visible;的部分依旧会显示。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题