Question

我在这里想念什么...

我正在尝试从外部精灵文件中显示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>

Answer 1

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

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

来自外部精灵文件的SVG

1 个答案: