堆叠条形图多SVG标签代码混乱，如何合并为单个SVG优化代码结构

API 探路者

2026-9-25

堆叠条形图多SVG合并为单SVG的解决方案

第一步：定义单SVG全局画布
根据条目数量动态计算总画布尺寸，全局X轴翻转样式直接挂载到根SVG节点，不用重复设置：

// 预先定义全局通用参数
const singleBarWidth = 90;
const totalSvgWidth = singleBarWidth * entries.length;
const svgHeight = 500;
const viewBoxHeight = 450;

// 根SVG节点
return <svg
  viewBox={`0, 0, ${totalSvgWidth}, ${viewBoxHeight}`}
  height={svgHeight}
  width={totalSvgWidth}
  style={{ transform: `rotateX(180deg)` }}
>
  {/* 所有图表内容都放在此SVG内部 */}
</svg>

第二步：按条目分组做坐标偏移
每个条目对应的条形内容用<g>标签包裹，通过translate属性沿X轴偏移到对应位置，替代原有的单独SVG：

{entries.map((entry, indx) => (
  <g key={entry.name} transform={`translate(${indx * singleBarWidth}, 0)`}>
    {rows(entry)}
    {/* 文本元素放在该分组内即可 */}
  </g>
))}

第三步：适配原有文本元素到SVG规范
原div承载的X轴标题和PROJECTS标签替换为SVG原生<text>元素，因为全局做了X轴翻转，文本需要单独再翻转一次保证正常显示：

{/* 放在上述<g>标签内部，和rows(entry)同级 */}
<text 
  className="x-title" 
  x="40" 
  y="-20" 
  style={{transform: "rotateX(180deg)", textAnchor: "middle"}}
>
  {entry.name}
</text>
{ indx === 1 && (
  <text 
    className="label-title" 
    x="40" 
    y="-50" 
    style={{transform: "rotateX(180deg)", textAnchor: "middle"}}
  >
    PROJECTS
  </text>
)}