Html 挑剔的内联SVG，<；符号/>；与<；使用/>；无法显示/渲染

最近，我从@codepen那里得到了一个提示，并尝试使用

和

使用更便携的svg。大多数情况下，它不会渲染，但在某些地方会渲染。考虑：

<div class="row"><!-- MaterializeCSS -->
    <div class="col s12 m6">
        <div id="componentDiv">
            <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                <symbol id="svg-icon-facebook" title="Facebook" viewBox="0 0 512 512">
                    <path d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z"></path>
                </symbol>
                ...
            </svg>

            <div class="my-svg-icons">
                <a href="login?provider=facebook" aria-label="Log in with facebook">
                    <span class="icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-icon-facebook"></use></svg></span>
                </a>
                ...
            </div>
        </div>
    </div>
</div>

...
...

其中，行在DOM（fwiw）中的深度约为5层

FF和Chrome拒绝渲染-我已经检查过广告拦截器是否被禁用，等等

歌剧表演得很愉快

我可以将“componentDiv”拉到一个简单的htmlboiler页面中，它将呈现

我还尝试将符号块定位为body>child，但没有效果

---

有什么想法吗？

解决方法：

看来，这个FF、Chrome问题已经影响了一段时间

我的解决方法只是在

我遇到了一个非常类似的问题，但在
符号中有一个
url（）
，它位于
svg
标记中，带有
“display:none”样式

可能的解决方法：使用特殊规则集隐藏原始的
svg
标记，而不是
display:none
：

<svg>
<symbol id="symbol-id">...</symbol>
...
</svg>
<svg>
  <use xlink:href="#symbol-id></use>
</svg>

下面是一个有两个类的示例：尝试将类“隐藏”更改为“可视化隐藏”：
Ok-直觉诱导的研究告诉我这是一个FF/Chrome相关url/相关bug。请继续关注。我想你所说的“bug”是指按它应该的方式工作；-）考虑将ID=“SVG图标脸谱网”改为ID=“SVGY-ICONFACE FooBook”神奇建议：摆脱显示：没有，而是将该符号打包在块中。存在与使用/标记/符号和显示相关的错误：chrome中无。
<img src="path/to/svg-markup.svg"/>
<svg>
  <use xlink:href="path/to/svg-markup#symbol-id></use>
</svg>

.visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}