我有一堆 svg 路径（用于图标），如果直接放在 html 中，它们可以正常工作。但由于有这么多，我想将它们放入外部文件中。我不能使用object or img因为我正在使用 css 来设置它们的样式。有任何想法吗？
<!-- svg paths -->
<symbol viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="icon1">
<path d="..."></path>
</symbol>
<symbol viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="icon2">
<path d="..."></path>
</symbol>
<symbol viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" id="icon3">
<path d="..."></path>
</symbol>
<!-- html -->
<svg>
<use xlink:href="#icon1"></use>
</svg>
<svg>
<use xlink:href="#icon2"></use>
</svg>
<svg>
<use xlink:href="#icon3"></use>
</svg>
您可以在 id 引用前面使用文件名。就像这里我指的是符号s2在文件中symbols.svg:
<!DOCTYPE html>
<html>
<head>
<title>SVG symbol</title>
</head>
<body>
<h1>Test</h1>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<use href="symbols.svg#s2" />
</svg>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
