最简svg柱状图可用5行代码实现：固定，用绘制4根柱子，x位置为2/10/18/26、宽6、高=20−value，y=0时柱顶对齐，配合clippath防溢出，缩放清晰、dom轻量、可内联。
用 <svg></svg> 画最简柱状图，5 行代码起步
不需要任何库，<svg></svg> 原生就能画出真正迷你（比如 80×20px）的柱状图。关键不是“多好看”，而是“缩放不糊、DOM 轻、能内联”。<div> + <code>height/background 方案在高 DPI 屏或缩放时会模糊，<canvas></canvas> 则要手动处理像素比和重绘。
实操建议：
- 用
<svg width="80" height="20" viewbox="0 0 80 20"></svg>，固定宽高但靠viewBox保证缩放清晰 - 每根柱子用
<rect></rect>，y从顶部算起，所以实际高度 =20 - value（假设值域是 0–20） - 柱宽硬编码为
6，间距2，4 个数据点刚好填满：位置分别是x=2, 10, 18, 26 - 别设
stroke，细边框在迷你尺寸下反而干扰识别
<svg width="80" height="20" viewbox="0 0 80 20"><rect x="2" y="12" width="6" height="8" fill="#333"></rect><rect x="10" y="6" width="6" height="14" fill="#333"></rect><rect x="18" y="16" width="6" height="4" fill="#333"></rect><rect x="26" y="2" width="6" height="18" fill="#333"></rect></svg>
用 CSS 自定义属性驱动 SVG 柱状图
想动态改数据？别拼 HTML 字符串，用 style="--bar-1:12; --bar-2:14" 配合 attr() 或 JS 注入更稳。纯 CSS 方案受限（attr() 只支持字符串，不能直接算减法），所以推荐 JS 控制 <rect></rect> 的 y 和 height 属性。
常见错误现象：setAttribute('y', value) 直接传数字没问题，但若 value 是字符串（比如从 dataset 读的），没转 Number() 就会导致柱子错位——SVG 里 y="12px" 合法，但 y="12" 和 y="12.0" 渲染一致；而 y="12abc" 会被忽略。
使用场景：仪表盘里嵌入一排状态指标，每个单元格右侧跟一个微型柱图表示负载百分比。
- 把 SVG 包进
<template></template>或用innerHTML初始化一次，避免重复解析 - 更新时只改
<rect></rect>的y和height，不重建整个 SVG - 值域归一化到 0–100 后，再映射到 0–20（高度），公式：
height = 20 - (value / 100) * 20
clipPath 是实现“截断式”迷你柱图的关键
真实业务中常遇到「最大值超范围」——比如某项指标爆到 150%，但柱图高度上限仍是 20px。这时候不能让柱子溢出容器（会破坏布局），也不能简单裁掉顶部（视觉上像被砍了一刀）。正确做法是用 <clippath></clippath> 定义安全区域，所有 <rect></rect> 都套进去。
性能影响：clipPath 对渲染性能几乎无负担，比用 overflow: hidden + 外层容器更轻量，且兼容所有现代浏览器（IE11 也支持）。
- 在
<svg></svg>内定义<defs><clippath id="chart-area"><rect x="0" y="0" width="80" height="20"></rect></clippath></defs> - 给每个
<rect></rect>加clip-path="url(#chart-area)" - 这样即使
y算成负数（比如 value=200% → y=-20），柱子也会被干净截断在顶部边界
别忽略字体和单位对 inline SVG 的干扰
把 SVG 当作内联元素插入 HTML 时，父容器的 font-size、line-height 会意外影响 SVG 内部文本（如果有），甚至导致整个 SVG 垂直偏移。迷你柱图虽无文字，但若后续加数值标签，就容易踩坑。
容易被忽略的地方：
- SVG 根元素默认
vertical-align: baseline，会和旁边文字底部对齐，造成“下沉”感；加vertical-align: top或middle更稳 - 不要在 SVG 外层 div 上设
font-size: 0来消除间隙——这会影响内部<text></text>渲染，应改用display: block或line-height: 0 - 所有尺寸写绝对单位（如
width="80"），别用em或rem，否则受上下文字体影响
复杂点在于：当同一页面有几十个迷你柱图时，逐个写 clipPath 和 viewBox 很累。这时值得抽一个极简函数，输入数组和容器宽高，返回 SVG 字符串——但注意别为了“复用”引入 DOM 操作库，原生 document.createElementNS('http://www.w3.org/2000/svg', 'svg') 足够快。
