在 svg 图中覆盖的 x 轴标签

【问题标题】：x-axis label overwritten in svg graph在 svg 图中覆盖的 x 轴标签
【发布时间】：2022-01-07 18:22:00
【问题描述】：

我正在处理堆积条形图。这是代码笔https://codepen.io/a166617/pen/NWvZGLd

正如您在 codepen 中看到的那样，x 轴标签相互重叠，我试图使其成一个角度，以便它们不会相互重叠。例如下面这个截图

我尝试将transform: rotateX(90deg) 添加为样式，但无法正确显示。这是我添加上述css的代码行

<text
  x={125 + rowIndex * 60}
  y={520}
  textAnchor="middle"
  style={{ fill: 'red',
           fontSize: '13px',
           transform: `rotateX(90deg)`
  }}
  >{entry.name}</text>

有人可以告诉我如何实现这一点，以便清楚地查看 x 轴标签。

【问题讨论】：

我已在您之前的问题中更新了my old answer 以添加缺少的标签。

标签： javascript html css reactjs svg

【解决方案1】：

旋转变换将围绕当前原点旋转。对于 SVG，它默认为 SVG 的原点。那是0,0。因为您的文本离 (0, 0) 不远，所以您的转换会将文本旋转到远离您想要的位置。

为避免这种情况，您需要在旋转之前更改 transform-origin。像这样的：

<text
  x={125 + rowIndex * 60}
  y={520}
  textAnchor="end"
  style={{ fill: 'red',
    fontSize: '13px',
    transformOrigin: (125 + rowIndex * 60)+'px 520px',
    transform: 'rotateZ(-45deg)'
  }}
  >{entry.name}</text>

在我对您上一个问题的更新答案中，我做了一个稍微不同的方式。我使用了只有 SVG transform 属性接受的特殊版本的旋转 (rotate(angle,cx,cy))。它包括一个 X、Y 旋转中心。对于 CSS，您必须使用 transform-origin。

【讨论】：