为什么 [hidden] 属性和“显示：无样式”不适用于我的<div>在 Angular html 组件中包含 SVG 标签的标签？

Question

I'm trying to hide my svg tag using the parent div tag, but it doesn't seem to be hiding either the read more div or the svg tag within it, using either the [hidden]--attribute, or bootstrap 'd-none' or css display:none;

<div  class="d-flex" [hidden]="true">
<div class="read-more mr-2">read more</div>
        <svg class="icon icon-read_more align-self-center bg-light">
          <use xlink:href="assets/symbol-defs.svg#icon-read_more"></use>
        </svg>
</div>

or

  <div  class="d-flex d-none">
    <div class="read-more mr-2">read more</div>
            <svg class="icon icon-read_more align-self-center bg-light">
              <use xlink:href="assets/symbol-defs.svg#icon-read_more"></use>
            </svg>
    </div>

Answer 1

Proper way should be:

<div class="d-flex" hidden>
   <!-- inner div content -->
</div>

Another option would be to use the visibility attribute:

visibility: visible; versus visibility: hidden;