インライン外部SVG

Question

CSSの埋め込みプロパティを使用できるソーシャルメディアリンク用の外部SVGイメージを使用したいと思います。 HTMLは次のようになります。

<a><svg width="30" height="30"> 
    <use xlink:href="image/svg/instagram.svg" class="insta"></use> 
</svg>Instagram</a> 

SVGが表示されません。さらに、私のCSSは次のようになります：

.insta { 
    fill: blue; 
} 

インラインSVGファイルのインクルード方法についてのヘルプは、本当に感謝しています。ウェブサイトはhereです。

Answer 1

あなたのhrefにこれが機能するために、そのシンボル要素

<symbol id="item"> 
... 
</symbol> 

およびリファレンス内部のSVGファイルの要素内に、あなたのSVGのアイコンをラップする必要があります。

<a><svg width="30" height="30"> 
    <use xlink:href="image/svg/instagram.svg#item" class="insta"></use> 
</svg>Instagram</a>