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

Question

如题，我使用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...

Answer 1

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