fill:currentColor是什么意思？iconfont为何要设置 vertical-align: -0.15em？

一、fill:currentColor是什么意思？

一）fill

1. fill 是SVG元素的一种属性;SVG元素的这些属性，用于指定如何处理或者呈现元素的详细信息
2. 比如，fill ,对于形状元素和文本，它定义了绘制元素的颜色。对于动画，它定义了动画的最终状态。在下面的例子中，它定义了图标的颜色。

二） currentColor

1. 在css中，currentColor是一个变量，这个变量的值是当前元素的color值。
2. 如果当前元素没有在CSS里显示地指定一个color值，那它的颜色值就遵从CSS规则，从父元素继承而来。

二、iconfont为何要设置vertical-align: -0.15em

因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果.详细见下方例子：

三、例子

iconfont（阿里图标库） 的 symbol引用，要求加入的通用css代码

.svg-icon {
  /*将icon大小设置和字体大小一致，后续在通过svg-icon 使用icon的时候，可直接设置图标的font-size即可控制图标大小 */
  width: 1em;
  height: 1em;
  vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
  fill: currentColor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
  overflow: hidden;
}

图标未设置 vertical-align: -0.15em;

设置过后：

参考：MDN、阿里图标库的symbol 引用