Html 来自外部sprite文件的SVG_Html_Svg_Sprite

Html 来自外部sprite文件的SVG

html svg

Html 来自外部sprite文件的SVG,html,svg,sprite,Html,Svg,Sprite,我在这里错过了什么我正在尝试从外部sprite文件显示svg徽标就我所知，编码是正确的，url路径肯定是正确的，正如使用时显示的徽标一样，并且.svg文件看起来很好，就像使用您错误地引用了外部文件。您需要使用xlink:href，而不是href： <!DOCTYPE html> <html lang="en"> <head>  <title>Test Site

我在这里错过了什么

我正在尝试从外部sprite文件显示svg徽标

就我所知，编码是正确的，url路径肯定是正确的，正如使用时显示的徽标一样，并且.svg文件看起来很好，就像使用

您错误地引用了外部文件。您需要使用

xlink:href

，而不是

href

：

<!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>

您错误地引用了外部文件。您需要使用

xlink:href

，而不是

href

：

<!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>

您好，谢谢您的回复，但这也不行。我本来有“xlink:href”，但我在某个地方读到“href”有效，所以我想我会试试，只是忘了把它改回去。嗨，谢谢你的回复，但这也不起作用。我最初有“xlink:href”，但我在某个地方读到“href”有效，所以我想我会试试，只是忘了把它改回去。