一、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 引用

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐