直接用 SVG 文件替换 SVG + JS 失败，为什么？

Question

我的网站通过SVG + JS method 使用Font Awesome SVG 图标。现在为了提高性能，我想通过直接加载单个 SVG 文件来使用图标。

我研究了插入图标的代码：

<i class="fab fa-facebook-f"></i>

据我了解，JS 只是搜索整个 DOM 并将上面的代码替换为带有样式的实际 SVG 数据，因此我运行 Chrome DevTools 然后检查图标，并为其获取以下代码：

<svg class="svg-inline--fa fa-facebook-f fa-w-10" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-fa-i2svg=""><path fill="currentColor" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg>

现在我将手动执行此操作，而不是让 JS 执行任务，因此我找到了类 svg-inline--fa 和 fa-w-10 的样式（似乎没有类 fa- 的样式） facebook-f)，然后将以下 CSS 代码添加到 style.css：

.my-svg-inline--fa.my-fa-w-10 {
    width: .625em;
}

.my-svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em;
}

path { fill: currentColor; }

.facebook-icon {
  background: url(/images/icons/facebook-f.svg);
}

.facebook-icon1 {
  background-image: url(/images/icons/facebook-f.svg);
}

.facebook-icon2 {
  background-image: url(/images/icons/facebook-f1.svg);
}

之后，我将图标嵌入到我的网页中，如下所示：

<div class="float-social">
  <ul>
    <li><a target="_blank" href="#"><i class="fab fa-facebook-f"></i></a></li>
    <li><a target="_blank" href="#"><i class="my-svg-inline--fa my-fa-w-10 facebook-icon"></i></a></li>   
    <li><a target="_blank" href="#"><span class="my-svg-inline--fa my-fa-w-10 facebook-icon1"></span></a></li>   
    <li><a target="_blank" href="#">
        <img class="my-svg-inline--fa my-fa-w-10" src="/images/icons/facebook-f1.svg"/>
        </a>
    </li>
    <li><a target="_blank" href="#"><span class="my-svg-inline--fa my-fa-w-10 facebook-icon2"></span></a></li>  
      <li><a target="_blank" href="#"><object type="image/svg+xml" data="/images/icons/facebook-f1.svg" class="my-svg-inline--fa my-fa-w-10"></object></a></li>
      <li><a target="_blank" href="#"><svg class="my-svg-inline--fa my-fa-w-10" viewBox="0 0 320 512">
    <use xlink:href="/images/icons/facebook-f2.svg#example"></use>
          </svg></a></li>     
  </ul>
</div>

我尝试了不同的方法，第一个是通过 SVG + JS 加载的原始图标，其余的是我的测试，但 5 个图标看起来都与原始图标不同：

为什么？

更新

实际代码在http://www.sybase-recovery.com/，在左侧栏可以看到7个facebook图标。

我尝试创建一个 JSFiddle：https://jsfiddle.net/alanccw/y95swck6/9/，但似乎只会显示第一个图标。不知道为什么？

更新 2

研究了JS生成的内嵌SVG和单个SVG文件的区别，发现有一个fill="currentColor"属性应该用来控制SVG图标的颜色.

所以我又做了两个测试：

1. 使用 fill="currentColor" 属性预设创建一个新的 SVG 图标。新的 SVG 图标位于 http://www.sybase-recovery.com/images/icons/facebook-f1.svg。但这不起作用。请参阅我的实现 4、5 和 6。

2. 我尝试按照How to change the color of an svg element? 中的说明在 CSS 中添加以下内容，但仍然无法正常工作：

path { fill: currentColor; }

更新 3

我添加了第 7 个实现：更改 svg 文件以添加并获取新的，它实际上是一个 SVG 精灵 http://www.sybase-recovery.com/images/icons/facebook-f2.svg

然后使用以下代码：

      <li><a target="_blank" href="#"><svg class="my-svg-inline--fa my-fa-w-10" viewBox="0 0 320 512">
    <use xlink:href="/images/icons/facebook-f2.svg#example"></use>
          </svg></a></li>

现在这个实现工作了。

不过，我还有更多问题：

1. 为什么即使我将 fill="currentColor" 添加到 SVG 图标，以下实现也不起作用？

<span class="my-svg-inline--fa my-fa-w-10 facebook-icon2"></span>

1. 虽然第 7 种实现方式有效，但它有很多缺点：

1. 我需要修改每个 SVG 图标并将其转换为 SVG 精灵。
2. HTML中使用的sn-p代码比较大，需要复制一些属性，包括viewbox，否则无法使用。

Answer 1

问题是currentColor变成的颜色是基于继承自父元素的color属性的值。

但是，您使用的是 <img> 元素。 <img> 元素是一个替换元素，替换元素不继承其父文档的样式。如果有帮助，您可以将替换元素视为放置在父文档中的另一个文档的缩略图。欲了解更多信息，请查看replaced elements 上的这篇文章。