从外部文件链接 svg 路径以显示在 HTML 中 [英] Link svg paths from external file to be displayed in HTML
本文介绍了从外部文件链接 svg 路径以显示在 HTML 中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一堆 svg 路径(用于图标)，如果它们直接放在 html 中就可以正常工作.但是有这么多，我想把它们放到一个外部文件中.我不能使用 object 或 img 因为我使用 css 来设置它们的样式.有什么想法吗?
I have a bunch of svg paths (for icons) which work fine if they are placed directly in the html. But with so many, I want to put them into an external file instead. I cant use object or img as I am using css to style them. any ideas?
<!-- 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 引用前使用文件名.就像这里我指的是文件 symbols.svg 中的符号 s2:
You can use the filename in front of the id reference. Like here I'm referring to the symbol s2 in the file 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>
这篇关于从外部文件链接 svg 路径以显示在 HTML 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
