0
我想製作一個有兩個導航的頁面，因爲圖標的排序和位置需要在移動設備和桌面之間更改。當以前的實例有顯示的父項時，爲什麼內聯SVG的實例變爲黑盒子？無？
雖然我將在導航之間複製相同的內聯SVG圖標。
這是一個codepen，演示Chrome中的行爲。在safari中看起來很好。
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：按照設計師的合同，移動設備上的「搜索」放大鏡圖標被刪除，因此它永遠不會在「display：none」父級內 - 並且在桌面上仍然顯示正常。
我在這裏做錯了什麼？我對SVG沒有經驗
這是一個Chrome bug嗎？
謝謝Paul。 – user3633109