Javascript 在RaphaelJS中,如何将旋转文本与底部对齐?

Javascript 在RaphaelJS中,如何将旋转文本与底部对齐?,javascript,rotation,alignment,raphael,vertical-alignment,Javascript,Rotation,Alignment,Raphael,Vertical Alignment,使用下面的代码,并受到问题的启发,我设法在HTML表中设置垂直列标题,与Internet Explorer兼容。现在,我需要设置的最后一个细节是标题垂直对齐:我希望将标题固定到行的底部 $(document).ready(function(){ $('tr th div').each(function (index, div){ R = Raphael($(div).attr('id'), 10, 200); R.text(5, 100, $(div).find('span').text())

使用下面的代码,并受到问题的启发,我设法在HTML表中设置垂直列标题,与Internet Explorer兼容。现在,我需要设置的最后一个细节是标题垂直对齐:我希望将标题固定到行的底部

$(document).ready(function(){
$('tr th div').each(function (index, div){
R = Raphael($(div).attr('id'), 10, 200);
R.text(5, 100, $(div).find('span').text())
.rotate(-90, true);
$(div).find('span').hide();
});
});
使用此代码,我可以得到以下结果:

正如您所看到的,标题是旋转的,但没有与单元格底部对齐,我希望它们是旋转的。我尝试使用:

vertical-align: bottom;
但这并没有改变任何事情

还要在JS代码中的.rotate指令之后或之前添加此命令:

.attr({'text-anchor': 'end'});
当放置在.rotate指令之前时,这只会使标题消失。当放置在.rotate指令之后时,我得到了更好的结果,但仍然不是我想要的结果,因为标题是基于最后一个字符垂直对齐的:

如何将这些标题与第一行的底部对齐以获得结果

谢谢

雨果取代了

.attr({'text-anchor': 'end'});
在旋转之前,使用此选项将文本对齐到起始位置

.attr({'text-anchor': 'start'});
而不是

.attr({'text-anchor': 'end'});
在旋转之前,使用此选项将文本对齐到起始位置

.attr({'text-anchor': 'start'});

如果在旋转之前放置,则会使收割台消失。如果放在旋转之后,它会工作,谢谢:)我不知道为什么我没有尝试这个组合。@我认为黄连木的消失是由旋转中心引起的。基本上只需将文本旋转到视口外部。你可以调整中心,让它反过来工作。如果放在旋转之前,这会使标题消失。如果放在旋转之后,它会工作,谢谢:)我不知道为什么我没有尝试这个组合。@我认为黄连木的消失是由旋转中心引起的。基本上只需将文本旋转到视口外部。你可以调整中心,让它反过来工作。