如何通过CSS修改::marker伪元素内SVG标记的颜色？

通过content: url()方式引入到::marker中的SVG，无论使用内联data URI还是外部独立文件，都会被浏览器识别为独立替换资源，不会继承伪元素的颜色上下文，SVG内部配置的fill="currentColor"无法读取到li元素的当前字体色值，因此无法实现颜色跟随效果。
另外::marker伪元素本身仅支持字体、文本方向、content等少量CSS属性，无法直接通过CSS修改嵌入SVG的填充色，这也是直接在::marker上写fill相关属性不生效的根本原因。

方案1：CSS遮罩实现（推荐，适配成本最低） #

不需要修改原有SVG文件，通过::before伪元素模拟列表标记，用遮罩渲染SVG图形，颜色自动继承当前元素字体色：

li {
  /* 先清除浏览器默认的列表标记 */
  list-style: none;
  position: relative;
  /* 按需调整左侧内边距，给自定义标记留出显示空间 */
  padding-left: 14px;
}

li::before {
  content: "";
  position: absolute;
  /* 垂直居中对齐文本 */
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  /* 尺寸和原SVG保持一致 */
  width: 5px;
  height: 8px;
  /* 加载SVG，支持外部文件路径、内联data URI两种写法 */
  -webkit-mask-image: url(/assets/images/icons/list-marker.svg);
  mask-image: url(/assets/images/icons/list-marker.svg);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* 填充色自动继承li元素的当前字体颜色 */
  background: currentColor;
}

如果需要用内联SVG，直接把mask-image的url值替换为你原来的data URI内容即可，不需要修改SVG内部的路径代码。带-webkit-前缀的属性用于兼容低版本Webkit内核浏览器，不需要兼容可删除。

方案2：内联SVG动态拼接色值（仅适合内联data URI场景） #

如果一定要直接通过::marker的content属性加载SVG，可以在写入data URI时，直接把currentColor替换为你需要的固定色值，但该方案无法自动适配动态变化的字体颜色，灵活性差，一般不推荐使用。

注意：不存在直接修改外部SVG文件配置就让content: url()引入的SVG支持currentColor继承的方案，所有这类动态跟随颜色的需求都建议改用方案1的遮罩实现。

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