内联 SVG 但在单独的文件中？答案

【问题标题】：inline SVG but in a separate file?内联 SVG 但在单独的文件中？
【发布时间】：2022-01-20 11:38:58
【问题描述】：

我想将 SVG 代码存储在一个单独的文件中，以便清理主代码。

我在<head>中使用这个脚本

 <script    src="https://code.jquery.com/jquery-3.6.0.min.js" 
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
        crossorigin="anonymous">
</script>

<script> 
    $(function(){
        $("icon").load("icon.xml");
    });
</script>

我这样调用文件：

<div class="logo">
    <a href="/""><div id="icon"></div></a>
</div>

但什么也没有出现。此方法适用于我作为导航链接的单独 html 引用。这个方法不支持其他文件类型吗？

【问题讨论】：

我不确定这是否是一个解决方案，但该元素的 jQuery ID selector 将是 $("#icon")。
XML 还是 SVG？此外，还有多个错误。你的意思是$('#icon')？接下来，<a> 标记中有一个额外的双引号。最后，您不应该将<div> 嵌套在<a> 中；改用 <span> 之类的内联元素。
@Raptor 谢谢，纠正所有这些错误解决了问题。而且，我将 svg 代码保存为 xml 文件。我将尝试以这种方式在 css 中对 svg 进行样式化。再次感谢
一个现代的原生 Web 组件可以让它变得更容易：dev.to/dannyengelman/…

标签： html svg

【解决方案1】：

由于拼写错误，SVG 无法显示。这是修复：

<script src="https://code.jquery.com/jquery-3.6.0.min.js" 
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
        crossorigin="anonymous"></script>
<script> 
    $(function(){
        $("#icon").load("icon.xml");
    });
</script>
<div class="logo">
    <a href="/"><div id="icon"></div></a>
</div>

【讨论】：