来自外部精灵文件的 SVG答案

【问题标题】：SVG from an external sprite file来自外部精灵文件的 SVG
【发布时间】：2020-05-27 17:47:20
【问题描述】：

我在这里错过了什么......

我正在尝试显示来自外部精灵文件的 svg 徽标。

据我所知，编码是正确的，url 路径肯定是正确的，因为使用时显示的徽标和 .svg 文件似乎很好，因为它再次显示在使用 <img> 时。

我错过了什么？

这是我的html代码

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- IMPORTANT META TAGS -->
    <title>Test Site</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="test site" />
    <meta name="keywords" content="Test Site" />
    <meta name="robots" content="all" />

</head>
<body>
    <div>svg</div>
    <svg class="icon" viewBox="0 0 32 32">
        <use href="test.svg#menu"></use>
    </svg>

<br />
<br />
<br />
<div>img</div>
    <img src="test.svg" alt="Kiwi standing on oval">
</body>
</html>

【问题讨论】：

标签： html svg sprite

【解决方案1】：

您错误地引用了外部文件。你需要使用xlink:href，而不是href：

<svg viewBox="0 0 100 100">
   <use xlink:href="test.svg#menu"></use>
</svg>

【讨论】：

您好，感谢您的回复，但这也不起作用。我最初有“xlink:href”，但我在某处读到“href”有效，所以我想我会尝试一下，只是忘了改回来。