気難しいインラインSVGは、<use/>と<symbol/>レンダリング/

Question

を表示するために失敗した私は最近@codepenから先端を引っ張り、<symbol/>と<use/>を使用して、よりポータブル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ページにプルすると、はにレンダリングされます。

また、シンボルブロックをボディ>子として配置しても効果がありませんでした。

どのような考えですか？

Answer 1

回避策：

このFF、クローム問題はしばらくの間manyに影響を与えているようです。

私の回避策は、インライン<svg/>ブロックではなく、<img/>タグで.svgをソースするだけでした。そこで、xling：href値が変更されました。

から：

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

へ：

<img src="path/to/svg-markup.svg"/> 
<svg> 
    <use xlink:href="path/to/svg-markup#symbol-id></use> 
</svg>