内联外部 SVG答案

【问题标题】：Inline External SVG内联外部 SVG
【发布时间】：2017-03-01 12:56:06
【问题描述】：

我想为社交媒体链接使用外部 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。

【问题讨论】：

标签： html css svg

【解决方案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>

【讨论】：