如何消除SVG viewBox在li::marker中的留白问题？

问题描述 #

使用list-style-image将SVG设为列表项标记时，li::marker容器（尺寸约25px×25px）底部存在隐藏留白，SVG仅能利用约2/3的高度，部分内容被遮挡。

核心原因 #

1. list-style-image依赖浏览器::marker容器渲染，默认对齐规则基于文字基线，SVG会被强制按基线对齐，导致上下留白。
2. SVG自身的width/height与viewBox不匹配，内容未填满容器可用空间。

解决方案 #

方案一：改用::before伪元素（推荐，完全控制样式） #

list-style-image对标记的样式控制有限，改用伪元素可自由定义容器尺寸、对齐方式和位置：

修改后的CSS代码：

.bullets {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
  padding-inline-start: 4rem;
  list-style-type: none;

  > li {
    position: relative;
    padding-left: 1.5rem; /* 为伪元素预留空间 */
  }

  > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.25em; /* 垂直对齐到文字基线 */
    width: 25px;
    height: 25px;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23000;font-family:Inter-Medium, Inter;font-size:18px;font-variation-settings:'wght' 500, 'slnt' 0;font-weight:300;letter-spacing:.02em;%7D%3C/style%3E%3C/defs%3E%3Cg id='PROJEKT'%3E%3Ctext class='cls-1' transform='translate(0 18)'%3E%3Ctspan x='0' y='0'%3E%E2%9F%B6%3C/tspan%3E%3C/text%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  &--check {
    > li::before {
      background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%234b91b8;%7D.cls-2%7Bfill:none;stroke:%23fff;stroke-linecap:round;stroke-linejoin:round;%7D%3C/style%3E%3C/defs%3E%3Ccircle class='cls-1' cx='10' cy='10' r='10'/%3E%3Cpolyline class='cls-2' points='4.5 10 8.17 13.67 15.5 6.33'/%3E%3C/svg%3E");
    }
  }
}

关键调整：

• 移除list-style-image，用li::before创建自定义标记容器
• 设置伪元素宽高为25px×25px，匹配预期标记尺寸
• 调整SVG的width/height和viewBox，让内容填满容器：
  • 箭头SVG：尺寸设为25px×25px，viewBox设为0 0 25 25，调整文字位置实现垂直居中
  • 对勾SVG：viewBox设为0 0 20 20（刚好包裹圆形），通过background-size: contain让SVG填满容器
• 用padding-left预留标记空间，top属性控制垂直对齐，匹配文字基线

方案二：修正SVG参数（保留list-style-image） #

若坚持使用list-style-image，需调整SVG的width/height和viewBox，让内容填满::marker容器：

箭头SVG修改：

<svg width='25' height='25' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'>
  <defs>
    <style>.cls-1{fill:#000;font-family:Inter-Medium, Inter;font-size:18px;font-variation-settings:'wght' 500, 'slnt' 0;font-weight:300;letter-spacing:.02em;}</style>
  </defs>
  <g id='PROJEKT'>
    <text class='cls-1' transform='translate(0 18)'><tspan x='0' y='0'>⚶</tspan></text>
  </g>
</svg>

对勾SVG修改：

<svg width='25' height='25' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>
  <defs>
    <style>.cls-1{fill:#4b91b8;}.cls-2{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;}</style>
  </defs>
  <circle class='cls-1' cx='10' cy='10' r='10'/>
  <polyline class='cls-2' points='4.5 10 8.17 13.67 15.5 6.33'/>
</svg>

关键调整：

• 将SVG的width/height设为25px，匹配::marker容器尺寸
• 调整viewBox精准包裹SVG内容，消除多余留白
• 调整内容位置（如箭头文字的transform），实现垂直居中

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