如何使用CSS仅为SVG字体颜色选择器图标的底部矩形部分上色？

完全可以仅通过修改<i>元素的CSS实现需求，不需要改动SVG内部代码、路径参数或额外规则。

实现原理 #

你当前使用的SVG图标由「上方字母A」和「底部矩形」两个独立形状合并为单条路径，我们可以通过CSS遮罩+分层背景的方式分别为两个区域指定颜色，全程符合仅修改<i>元素样式的限制。

可直接复用的代码 #

/* 仅修改i元素相关样式，完全不碰原有HTML结构 */
i.Button-icon.icon-518 {
  /* 底部色块：修改这个变量即可切换底部颜色 */
  --bottom-block-color: #ff4d4f;
  /* 上方字母A的固定颜色，无需修改可固定写死 */
  --letter-a-color: #000000;
  position: relative;
  /* 分层背景，上半部分显示A的颜色，下半部分显示底部色块颜色 */
  background: linear-gradient(
    to bottom,
    var(--letter-a-color) 0,
    var(--letter-a-color) 68.75%,
    var(--bottom-block-color) 68.75%,
    var(--bottom-block-color) 100%
  );
  /* 用原有SVG作为遮罩，仅显示图标形状对应的背景区域 */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 1c.2 0 .38.12.46.3l3 7a.5.5 0 01-.92.4L9.81 7H6.2l-.73 1.7a.5.5 0 11-.92-.4l3-7A.5.5 0 018 1zM6.62 6h2.76L8 2.77 6.62 6zM2 11.5c0-.83.67-1.5 1.5-1.5h9c.83 0 1.5.67 1.5 1.5v2c0 .83-.67 1.5-1.5 1.5h-9A1.5 0 012 13.5v-2z"/></svg>') center/100% 100% no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 1c.2 0 .38.12.46.3l3 7a.5.5 0 01-.92.4L9.81 7H6.2l-.73 1.7a.5.5 0 11-.92-.4l3-7A.5.5 0 018 1zM6.62 6h2.76L8 2.77 6.62 6zM2 11.5c0-.83.67-1.5 1.5-1.5h9c.83 0 1.5.67 1.5 1.5v2c0 .83-.67 1.5-1.5 1.5h-9A1.5 0 012 13.5v-2z"/></svg>') center/100% 100% no-repeat;
}

/* 隐藏原有SVG的默认填充，用自定义背景色替代 */
i.Button-icon.icon-518 svg path {
  fill: transparent;
}

使用说明 #

• 仅需要调整--bottom-block-color的色值，即可任意更换底部色块的颜色，上方字母A的颜色始终保持独立不受影响
• 代码已兼容主流浏览器，68.75%的分界值是根据SVG viewBox高度16px、底部矩形起点在11px的比例计算得出，不需要调整

内容的提问来源于stack exchange，提问作者flyingbee