Html 不同的SVG'；s显示为浏览器中的第一个SVG

基本上，我正在构建一个jekyll站点，其页脚包含一些用于社交图标的svg，但问题是第一个svg（它们保存在

icons/.html

文件中）在浏览器中呈现时将替换所有其他svg。因此，现在呈现的不是twitter图标、snapchat图标、facebook.icon等，而是四个twitter图标。问题是第一个svg正在取代其他svg，但为什么呢？是否有其他方法导入SVG文件

我试过使用firefox、chrome和safari，结果都是一样的。尝试创建一个单独的svg文件并使用

{%include icons/.svg%}

但没有修复它

这是我的footer.html文件：

<nav>
<a href="#" class="social-icons">{% include icons/twitterIcon.html %}</a>
<a href="#" class="social-icons">{% include icons/snapchatIcon.html %}</a>
<a href="#" class="social-icons">{% include icons/facebookIcon.html %}</a>
<a href="#" class="social-icons">{% include icons/instagramIcon.html %}</a> 
</nav>

链接到chrome如何显示页脚：

---

我期望有四个不同的svg，而第一个svg被渲染四次。为什么会这样？有解决办法吗？

首先，我认为您需要尝试一种不同的方法

在项目的根目录中创建一个名为“_data”的文件夹，并在其中创建一个名为content.yml的新文件或任何您想调用的文件

在content.yml文件中添加以下内容：-注意，这也可以是.json或.csv

social:
 - name: "Twitter"
   link: "http://twitter.com"
   icon: "/link/to/image.svg"
 - name: "SnapChat"
   link: "http://snapchat.com"
   icon: "/link/to/image.svg"
 - name: "Facebook"
   link: "http://facebook.com"
   icon: "/link/to/image.svg"

在希望显示社交链接的位置添加以下语法

<nav>
  {% for social in site.data.content.social %}
    <a href="{{ social.link }}" class="social-icons">{{ social.icon }}</a>
  {% endfor %}
</nav>

{site.data.content.social%中的社交%
{%endfor%}

在_includes/icons文件夹中，将SVG文件保存为实际的SVG而不是.HTML文件，并将其放置在图像或资源文件夹中

这样，您的HTML标记更加清晰

---

希望这能有所帮助。

您的内容包括哪些？你能不能链接到一个repo，它在一个页面中显示了这种行为？当然，链接到包含svg文件的repo：这里的问题可能是，图标具有相同的id值，当它们都包含在一起时会发生冲突。