不同的 SVG 显示为浏览器中的第一个 SVG

Question

基本上我正在构建一个 jekyll 网站，其页脚包含一些用于社交图标的 SVG，但问题是第一个 svg（它们保存在 icons/<socialNames>.html 文件中）将在浏览器中呈现时替换所有其他 SVG .因此，不是有一个 twitter 图标、snapchat 图标、facebook.icon 等，而是呈现了四个 twitter 图标。问题是第一个 svg 正在替换其他 svg，但为什么呢？有没有其他方法可以导入 SVG 文件？

我尝试过使用 firefox、chrome 和 safari，结果都一样。尝试制作一个单独的 svg 文件并使用 {% include icons/<fileName>.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如何显示页脚的imgur链接：https://i.imgur.com/VBYNHqd.png

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

Answer 1

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

在您的项目的根目录中创建一个名为“_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>

在您的 _includes/icons 文件夹中，将 SVG 文件保存为实际的 SVG，而不是 .HTML 文件，然后将其放在您的图像或资产文件夹中。

这样你的 HTML 标记就更干净了。

希望这会有所帮助。