内联外部SVG

Question

我想将外部SVG图像用于社交媒体链接，我可以使用CSS填充属性。 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

您需要将SVG图标包含在符号元素

内的svg文件元素中

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

并在你的href中引用它来使其工作。

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