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

Question

基本上我正在构建一个带有页脚的 jekyll 网站，其中包含一些用于社交图标的 SVG，但问题是第一个 svg（它们保存在 icons/<socialNames>.html 文件中）将替换所有其他 SVG 时在浏览器中呈现。因此，呈现的不是 Twitter 图标、Snapchat 图标、facebook.icon 等，而是四个 Twitter 图标。问题是第一个 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>

imgur link chrome 如何显示页脚：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 标记就更干净了。

希望对您有所帮助。

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

different SVG's showing up as the first SVG in browser

html

svg

jekyll