我在我的网络应用程序中使用Chartist.js中的条形图。这些条形图的名称为标签。
有些名字非常大，彼此重叠。因此，使用JavaScript我将这些名称换成了较短的版本（例如，如果名称的长度大于10个字符，则更改其余字符的三个点'...'）。
我还想将这些标签旋转到-15度。我使用以下CSS属性来旋转它们
transform: rotate(-15deg) translate(5px,10px);
问题：上面的属性已成功旋转它们只有一个分辨率。 当我检查其他分辨率的相同条形图时，它们会从它们的位置移位并向上浮动以获得更大的分辨率。当我删除此属性时，它们在各自的位置保持良好状态，并且对所有分辨率都表现良好。
旋转导致浮动。给他们改变起源也没有帮助。这些标签的DOM如下，其中两个是问题图像。
DOM
<g class="ct-labels">
<foreignObject style="overflow: visible;" x="40" y="195" width="131.43892045454547" height="70">
<span class="ct-label ct-horizontal ct-end" style="width: 131px; height: 70px" xmlns="http://www.w3.org/2000/xmlns/" data-assignedtoname="ARORA,VIKAS">VIKAS, ARORA</span>
</foreignObject>
