当以前的实例有父显示器时，为什么内联SVG的实例变成黑盒子？没有？

Question

我正在尝试创建一个包含两个导航的页面，因为图标的排序和位置需要在移动设备和桌面之间进行更改。

我会在导航之间复制相同的内联SVG图标。

这是一个用于演示Chrome中的行为的codepen。在野生动物园似乎很好。

https://codepen.io/stephen_marsh/pen/RZaxqO

因为StackOverflow唠叨我，所以代码是：

HTML：

  <nav class="nav-mobile">
  <div class="nav-left">
    <button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
  <defs>
    <path id="hamburger-a" d="M0.96,-3.55271368e-15 L15.04,-3.55271368e-15 C15.552,-3.55271368e-15 16,0.544352952 16,1.16647061 C16,1.78858827 15.552,2.33294122 15.04,2.33294122 L0.96,2.33294122 C0.448,2.33294122 0,1.78858827 0,1.16647061 C0,0.544352952 0.448,-3.55271368e-15 0.96,-3.55271368e-15 Z M0.96,5.44352952 L15.04,5.44352952 C15.552,5.44352952 16,5.98788247 16,6.61000013 C16,7.23211779 15.552,7.77647075 15.04,7.77647075 L0.96,7.77647075 C0.448,7.77647075 0,7.23211779 0,6.61000013 C0,5.98788247 0.448,5.44352952 0.96,5.44352952 Z M0.96,10.887059 L15.04,10.887059 C15.552,10.887059 16,11.431412 16,12.0535297 C16,12.6756473 15.552,13.2200003 15.04,13.2200003 L0.96,13.2200003 C0.448,13.2200003 0,12.6756473 0,12.0535297 C0,11.431412 0.448,10.887059 0.96,10.887059 Z"/>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <polygon points="0 0 24 0 24 24 0 24" opacity="0"/>
    <g transform="translate(4 5)">
      <mask id="hamburger-b" fill="#fff">
        <use xlink:href="#hamburger-a"/>
      </mask>
      <use fill="#9E9E9E" xlink:href="#hamburger-a"/>
      <g fill="#424242" mask="url(#hamburger-b)">
        <rect width="24" height="24" transform="translate(-4 -5)"/>
      </g>
    </g>
  </g>
</svg>
</button>

    <button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
  <defs>
    <path id="covers-a" d="M2,9.21052632 L6.21052632,9.21052632 L6.21052632,5 L2,5 L2,9.21052632 L2,9.21052632 Z M2,14.4736842 L6.21052632,14.4736842 L6.21052632,10.2631579 L2,10.2631579 L2,14.4736842 L2,14.4736842 Z M7.26315789,14.4736842 L11.4736842,14.4736842 L11.4736842,10.2631579 L7.26315789,10.2631579 L7.26315789,14.4736842 L7.26315789,14.4736842 Z M12.5263158,14.4736842 L16.7368421,14.4736842 L16.7368421,10.2631579 L12.5263158,10.2631579 L12.5263158,14.4736842 L12.5263158,14.4736842 Z M7.26315789,9.21052632 L11.4736842,9.21052632 L11.4736842,5 L7.26315789,5 L7.26315789,9.21052632 L7.26315789,9.21052632 Z M12.5263158,5 L12.5263158,9.21052632 L16.7368421,9.21052632 L16.7368421,5 L12.5263158,5 L12.5263158,5 Z M17.7894737,14.4736842 L22,14.4736842 L22,10.2631579 L17.7894737,10.2631579 L17.7894737,14.4736842 L17.7894737,14.4736842 Z M2,19.7368421 L6.21052632,19.7368421 L6.21052632,15.5263158 L2,15.5263158 L2,19.7368421 L2,19.7368421 Z M7.26315789,19.7368421 L11.4736842,19.7368421 L11.4736842,15.5263158 L7.26315789,15.5263158 L7.26315789,19.7368421 L7.26315789,19.7368421 Z M12.5263158,19.7368421 L16.7368421,19.7368421 L16.7368421,15.5263158 L12.5263158,15.5263158 L12.5263158,19.7368421 L12.5263158,19.7368421 Z M17.7894737,19.7368421 L22,19.7368421 L22,15.5263158 L17.7894737,15.5263158 L17.7894737,19.7368421 L17.7894737,19.7368421 Z M17.7894737,5 L17.7894737,9.21052632 L22,9.21052632 L22,5 L17.7894737,5 L17.7894737,5 Z"/>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <polygon points="0 0 24 0 24 24 0 24" opacity="0"/>
    <mask id="covers-b" fill="#fff">
      <use xlink:href="#covers-a"/>
    </mask>
    <use fill="#BDBDBD" xlink:href="#covers-a"/>
    <g fill="#424242" mask="url(#covers-b)">
      <rect width="24" height="24"/>
    </g>
  </g>
</svg>
</button>

  </div>

  <div class="nav-right">

    <button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
  <defs>
    <path id="empty-a" d="M12.96875,1.55555556 C12.734375,1.32222222 11.484375,0.388888889 11.25,0.233333333 C11.015625,-1.77635684e-15 10.625,-1.77635684e-15 10.390625,-1.77635684e-15 L2.96875,-1.77635684e-15 C2.734375,-1.77635684e-15 2.34375,0.0777777778 2.109375,0.233333333 C1.875,0.466666667 0.625,1.4 0.390625,1.55555556 C0.15625,1.78888889 0,2.02222222 0,2.48888889 C0.078125,2.87777778 1.484375,12.4444444 1.484375,12.4444444 C1.5625,12.6777778 1.875,12.9111111 2.109375,12.9111111 L11.171875,12.9111111 C11.40625,12.9111111 11.71875,12.6777778 11.796875,12.4444444 C11.796875,12.4444444 13.203125,2.87777778 13.28125,2.48888889 C13.359375,2.02222222 13.203125,1.71111111 12.96875,1.55555556 L12.96875,1.55555556 Z M10,4.9 C10,4.9 10,5.13333333 9.921875,5.52222222 L9.921875,5.52222222 L9.921875,5.67777778 C9.765625,6.53333333 9.296875,7.31111111 8.59375,7.77777778 C8.046875,8.16666667 7.421875,8.32222222 6.796875,8.32222222 C6.09375,8.32222222 5.46875,8.08888889 5,7.77777778 C4.296875,7.31111111 3.75,6.53333333 3.671875,5.67777778 L3.671875,5.52222222 L3.671875,5.52222222 C3.59375,5.21111111 3.59375,4.9 3.59375,4.9 C3.59375,4.9 3.59375,4.9 3.59375,4.82222222 C3.59375,4.82222222 3.59375,4.82222222 3.59375,4.74444444 C3.59375,4.66666667 3.671875,4.51111111 3.75,4.43333333 C3.828125,4.35555556 3.984375,4.27777778 4.0625,4.27777778 L4.0625,4.27777778 L4.140625,4.27777778 L4.140625,4.27777778 C4.296875,4.27777778 4.453125,4.35555556 4.53125,4.51111111 C4.609375,4.58888889 4.609375,4.66666667 4.609375,4.74444444 C4.609375,4.74444444 4.6875,4.97777778 4.6875,5.28888889 L4.6875,5.44444444 L4.6875,5.44444444 C4.765625,5.83333333 5,6.22222222 5.3125,6.53333333 C5.703125,6.84444444 6.171875,7.07777778 6.71875,7.07777778 C7.265625,7.07777778 7.734375,6.84444444 8.125,6.53333333 C8.4375,6.22222222 8.671875,5.91111111 8.75,5.44444444 L8.75,5.44444444 L8.75,5.28888889 C8.828125,4.97777778 8.828125,4.74444444 8.828125,4.74444444 C8.828125,4.66666667 8.828125,4.58888889 8.90625,4.51111111 C8.984375,4.35555556 9.140625,4.27777778 9.296875,4.27777778 L9.296875,4.27777778 L9.375,4.27777778 L9.375,4.27777778 C9.53125,4.27777778 9.609375,4.35555556 9.6875,4.43333333 C9.765625,4.51111111 9.84375,4.58888889 9.84375,4.74444444 C10,4.82222222 10,4.82222222 10,4.9 L10,4.9 L10,4.9 Z M11.40625,2.1 L11.40625,2.1 L10.703125,2.1 L9.609375,2.1 L7.5,2.1 L5.78125,2.1 L3.671875,2.1 L2.578125,2.1 L2.03125,2.1 L2.03125,2.1 C1.875,2.1 1.796875,2.02222222 1.796875,1.86666667 C1.796875,1.78888889 1.796875,1.71111111 1.875,1.71111111 L1.875,1.71111111 L2.734375,1.08888889 L2.734375,1.08888889 C2.734375,1.08888889 2.734375,1.08888889 2.8125,1.01111111 L2.8125,1.01111111 C2.890625,0.933333333 3.046875,0.855555556 3.203125,0.855555556 L3.203125,0.855555556 L10.078125,0.855555556 L10.078125,0.855555556 C10.234375,0.855555556 10.390625,0.933333333 10.46875,1.01111111 L10.46875,1.01111111 C10.46875,1.01111111 10.46875,1.01111111 10.546875,1.08888889 L10.546875,1.08888889 L11.40625,1.71111111 L11.484375,1.71111111 C11.5625,1.78888889 11.5625,1.78888889 11.5625,1.86666667 C11.640625,1.94444444 11.484375,2.1 11.40625,2.1 L11.40625,2.1 Z"/>
  </defs>
  <g fill="none" fill-rule="evenodd" transform="translate(5 6)">
    <mask id="empty-b" fill="#fff">
      <use xlink:href="#empty-a"/>
    </mask>
    <use fill="#BDBDBD" xlink:href="#empty-a"/>
    <g fill="#424242" mask="url(#empty-b)">
      <rect width="24" height="24" transform="translate(-5 -6)"/>
    </g>
  </g>
</svg>
</button>

  </div>
</nav>

<nav class="nav-desktop">
  <div class="nav-left">
    <button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
  <defs>
    <path id="hamburger-a" d="M0.96,-3.55271368e-15 L15.04,-3.55271368e-15 C15.552,-3.55271368e-15 16,0.544352952 16,1.16647061 C16,1.78858827 15.552,2.33294122 15.04,2.33294122 L0.96,2.33294122 C0.448,2.33294122 0,1.78858827 0,1.16647061 C0,0.544352952 0.448,-3.55271368e-15 0.96,-3.55271368e-15 Z M0.96,5.44352952 L15.04,5.44352952 C15.552,5.44352952 16,5.98788247 16,6.61000013 C16,7.23211779 15.552,7.77647075 15.04,7.77647075 L0.96,7.77647075 C0.448,7.77647075 0,7.23211779 0,6.61000013 C0,5.98788247 0.448,5.44352952 0.96,5.44352952 Z M0.96,10.887059 L15.04,10.887059 C15.552,10.887059 16,11.431412 16,12.0535297 C16,12.6756473 15.552,13.2200003 15.04,13.2200003 L0.96,13.2200003 C0.448,13.2200003 0,12.6756473 0,12.0535297 C0,11.431412 0.448,10.887059 0.96,10.887059 Z"/>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <polygon points="0 0 24 0 24 24 0 24" opacity="0"/>
    <g transform="translate(4 5)">
      <mask id="hamburger-b" fill="#fff">
        <use xlink:href="#hamburger-a"/>
      </mask>
      <use fill="#9E9E9E" xlink:href="#hamburger-a"/>
      <g fill="#424242" mask="url(#hamburger-b)">
        <rect width="24" height="24" transform="translate(-4 -5)"/>
      </g>
    </g>
  </g>
</svg>
</button>

    <button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
  <defs>
    <path id="covers-a" d="M2,9.21052632 L6.21052632,9.21052632 L6.21052632,5 L2,5 L2,9.21052632 L2,9.21052632 Z M2,14.4736842 L6.21052632,14.4736842 L6.21052632,10.2631579 L2,10.2631579 L2,14.4736842 L2,14.4736842 Z M7.26315789,14.4736842 L11.4736842,14.4736842 L11.4736842,10.2631579 L7.26315789,10.2631579 L7.26315789,14.4736842 L7.26315789,14.4736842 Z M12.5263158,14.4736842 L16.7368421,14.4736842 L16.7368421,10.2631579 L12.5263158,10.2631579 L12.5263158,14.4736842 L12.5263158,14.4736842 Z M7.26315789,9.21052632 L11.4736842,9.21052632 L11.4736842,5 L7.26315789,5 L7.26315789,9.21052632 L7.26315789,9.21052632 Z M12.5263158,5 L12.5263158,9.21052632 L16.7368421,9.21052632 L16.7368421,5 L12.5263158,5 L12.5263158,5 Z M17.7894737,14.4736842 L22,14.4736842 L22,10.2631579 L17.7894737,10.2631579 L17.7894737,14.4736842 L17.7894737,14.4736842 Z M2,19.7368421 L6.21052632,19.7368421 L6.21052632,15.5263158 L2,15.5263158 L2,19.7368421 L2,19.7368421 Z M7.26315789,19.7368421 L11.4736842,19.7368421 L11.4736842,15.5263158 L7.26315789,15.5263158 L7.26315789,19.7368421 L7.26315789,19.7368421 Z M12.5263158,19.7368421 L16.7368421,19.7368421 L16.7368421,15.5263158 L12.5263158,15.5263158 L12.5263158,19.7368421 L12.5263158,19.7368421 Z M17.7894737,19.7368421 L22,19.7368421 L22,15.5263158 L17.7894737,15.5263158 L17.7894737,19.7368421 L17.7894737,19.7368421 Z M17.7894737,5 L17.7894737,9.21052632 L22,9.21052632 L22,5 L17.7894737,5 L17.7894737,5 Z"/>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <polygon points="0 0 24 0 24 24 0 24" opacity="0"/>
    <mask id="covers-b" fill="#fff">
      <use xlink:href="#covers-a"/>
    </mask>
    <use fill="#BDBDBD" xlink:href="#covers-a"/>
    <g fill="#424242" mask="url(#covers-b)">
      <rect width="24" height="24"/>
    </g>
  </g>
</svg>
</button>
  </div>
  <div class="nav-right">
    <button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
  <defs>
    <path id="search-a" d="M16.3217424,14.8346938 C15.9890463,14.568364 15.7228895,13.9025394 15.9225071,13.5030447 C16.52136,12.3711429 16.7875168,11.1060762 16.5878992,9.70784463 C16.2552031,6.97796389 14.1259486,4.71416034 11.3978413,4.3146656 C7.07279299,3.58225857 3.41313676,7.31087617 4.0785288,11.6387359 C4.54430323,14.3686166 6.74009697,16.4992553 9.46820433,16.8321676 C10.8655276,17.0319149 12.1297725,16.7655851 13.260939,16.166343 C13.593635,15.9665956 14.1924878,16.2329254 14.5251838,16.5658377 L17.519448,19.7617957 C18.1183009,20.4276202 19.1829281,20.3610378 19.7152418,19.6286308 C20.1810162,19.0293886 20.0479378,18.1638167 19.5156241,17.631157 L16.3217424,14.8346938 L16.3217424,14.8346938 Z M5.94162652,10.5068341 C5.94162652,8.10986566 7.87126344,6.11239195 10.2666748,6.11239195 C12.6620861,6.11239195 14.591723,8.0432832 14.591723,10.5068341 C14.591723,12.9038026 12.6620861,14.9012763 10.2666748,14.9012763 C7.87126344,14.9012763 5.94162652,12.970385 5.94162652,10.5068341 L5.94162652,10.5068341 Z"/>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <mask id="search-b" fill="#fff">
      <use xlink:href="#search-a"/>
    </mask>
    <use fill="#212121" xlink:href="#search-a"/>
    <g fill="#424242" mask="url(#search-b)">
      <rect width="24" height="24"/>
    </g>
  </g>
</svg>
</button>

    <button class="button-circle"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
  <defs>
    <path id="empty-a" d="M12.96875,1.55555556 C12.734375,1.32222222 11.484375,0.388888889 11.25,0.233333333 C11.015625,-1.77635684e-15 10.625,-1.77635684e-15 10.390625,-1.77635684e-15 L2.96875,-1.77635684e-15 C2.734375,-1.77635684e-15 2.34375,0.0777777778 2.109375,0.233333333 C1.875,0.466666667 0.625,1.4 0.390625,1.55555556 C0.15625,1.78888889 0,2.02222222 0,2.48888889 C0.078125,2.87777778 1.484375,12.4444444 1.484375,12.4444444 C1.5625,12.6777778 1.875,12.9111111 2.109375,12.9111111 L11.171875,12.9111111 C11.40625,12.9111111 11.71875,12.6777778 11.796875,12.4444444 C11.796875,12.4444444 13.203125,2.87777778 13.28125,2.48888889 C13.359375,2.02222222 13.203125,1.71111111 12.96875,1.55555556 L12.96875,1.55555556 Z M10,4.9 C10,4.9 10,5.13333333 9.921875,5.52222222 L9.921875,5.52222222 L9.921875,5.67777778 C9.765625,6.53333333 9.296875,7.31111111 8.59375,7.77777778 C8.046875,8.16666667 7.421875,8.32222222 6.796875,8.32222222 C6.09375,8.32222222 5.46875,8.08888889 5,7.77777778 C4.296875,7.31111111 3.75,6.53333333 3.671875,5.67777778 L3.671875,5.52222222 L3.671875,5.52222222 C3.59375,5.21111111 3.59375,4.9 3.59375,4.9 C3.59375,4.9 3.59375,4.9 3.59375,4.82222222 C3.59375,4.82222222 3.59375,4.82222222 3.59375,4.74444444 C3.59375,4.66666667 3.671875,4.51111111 3.75,4.43333333 C3.828125,4.35555556 3.984375,4.27777778 4.0625,4.27777778 L4.0625,4.27777778 L4.140625,4.27777778 L4.140625,4.27777778 C4.296875,4.27777778 4.453125,4.35555556 4.53125,4.51111111 C4.609375,4.58888889 4.609375,4.66666667 4.609375,4.74444444 C4.609375,4.74444444 4.6875,4.97777778 4.6875,5.28888889 L4.6875,5.44444444 L4.6875,5.44444444 C4.765625,5.83333333 5,6.22222222 5.3125,6.53333333 C5.703125,6.84444444 6.171875,7.07777778 6.71875,7.07777778 C7.265625,7.07777778 7.734375,6.84444444 8.125,6.53333333 C8.4375,6.22222222 8.671875,5.91111111 8.75,5.44444444 L8.75,5.44444444 L8.75,5.28888889 C8.828125,4.97777778 8.828125,4.74444444 8.828125,4.74444444 C8.828125,4.66666667 8.828125,4.58888889 8.90625,4.51111111 C8.984375,4.35555556 9.140625,4.27777778 9.296875,4.27777778 L9.296875,4.27777778 L9.375,4.27777778 L9.375,4.27777778 C9.53125,4.27777778 9.609375,4.35555556 9.6875,4.43333333 C9.765625,4.51111111 9.84375,4.58888889 9.84375,4.74444444 C10,4.82222222 10,4.82222222 10,4.9 L10,4.9 L10,4.9 Z M11.40625,2.1 L11.40625,2.1 L10.703125,2.1 L9.609375,2.1 L7.5,2.1 L5.78125,2.1 L3.671875,2.1 L2.578125,2.1 L2.03125,2.1 L2.03125,2.1 C1.875,2.1 1.796875,2.02222222 1.796875,1.86666667 C1.796875,1.78888889 1.796875,1.71111111 1.875,1.71111111 L1.875,1.71111111 L2.734375,1.08888889 L2.734375,1.08888889 C2.734375,1.08888889 2.734375,1.08888889 2.8125,1.01111111 L2.8125,1.01111111 C2.890625,0.933333333 3.046875,0.855555556 3.203125,0.855555556 L3.203125,0.855555556 L10.078125,0.855555556 L10.078125,0.855555556 C10.234375,0.855555556 10.390625,0.933333333 10.46875,1.01111111 L10.46875,1.01111111 C10.46875,1.01111111 10.46875,1.01111111 10.546875,1.08888889 L10.546875,1.08888889 L11.40625,1.71111111 L11.484375,1.71111111 C11.5625,1.78888889 11.5625,1.78888889 11.5625,1.86666667 C11.640625,1.94444444 11.484375,2.1 11.40625,2.1 L11.40625,2.1 Z"/>
  </defs>
  <g fill="none" fill-rule="evenodd" transform="translate(5 6)">
    <mask id="empty-b" fill="#fff">
      <use xlink:href="#empty-a"/>
    </mask>
    <use fill="#BDBDBD" xlink:href="#empty-a"/>
    <g fill="#424242" mask="url(#empty-b)">
      <rect width="24" height="24" transform="translate(-5 -6)"/>
    </g>
  </g>
</svg>
</button>

  </div>
</nav>

CSS：

nav.nav-desktop {
  display: none;
}

@media only screen and (min-width: 48em) {
  nav.nav-mobile {
    display: none;
  }

  nav.nav-desktop {
    display: initial;
    z-index: 999;
    width: 100%;
    height: 96px;
    position: fixed;
    top: 0;
    left: 0;
  }

  nav.nav-desktop .nav-left {
    display: inline-block;
    position: absolute;
    top: 28px;
    left: 24px;
  }

  nav.nav-desktop .nav-left button {
    margin-left: 24px;
  }

  nav.nav-desktop .nav-right {
    display: inline-block;
    position: absolute;
    top: 28px;
    right: 24px;
  }

  nav.nav-desktop .nav-right button {
    margin-right: 24px;
  }

  nav.nav-desktop .logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 438px;
    height: 72px;
    margin: -36px 0 0 -219px;
  }
}

请注意，一旦进入桌面断点，4个图标中的3个将成为黑盒子。

Fyi：＆＃34;搜索＆＃34;根据设计师的配件，移动放大镜图标被删除，因此它永远不会出现在显示器中：无＆＃34;父 - 所以在桌面上仍然显示正常。

我在这里做错了吗？我对SVG没有经验

这是Chrome错误吗？

Answer 1

这是因为您有重复的id属性。例如，您有两个标有<mask>的{​​{1}}元素。

如果您有重复的id="hamburger-b"属性，则取决于浏览器使用哪个属性。如果定义相同，您可能想知道为什么这会很重要。很遗憾，事实证明您正好将Chrome选择的设置为id。

解决方案是更改其中一个重复项的ID。例如，将display: none更改为hamburger-a，hamburger-a2更改为hamburger-b等。