如何在SVG中居中90º旋转文本

使用D3，我想要一个Y轴标签，该标签旋转了-90º且居中在Y轴上。我认为这将是一块蛋糕，并写了以下情况：如何在SVG中居中90º旋转文本

// Y Axis Label 
svg.append('svg:text') 
    .attr('class', 'y label') 
    .attr('text-anchor', 'middle') 
    .attr('y', 0) 
    .attr('width', height) 
    .attr('transform', 'translate(-' + yAxisSpacing + ',' + height + ') rotate(-90)') 
    .text('Y Axis Label')

height在这种情况下是图表（由SVG所占据的垂直区域）的高度。上面的代码会将<text>元素渲染到图表的左下角，然后将文字相对于该左下角点居中。 width确实不是改变，因此而不是被居中，它运行在svg的左下角。

我猜测，如果width等于图表的height，那么其中的文本将变为垂直居中。这似乎并不是这种情况 - 或者 - 我需要在SVG中设置一些神奇的display:block type属性，以使width能够在<text>元素上工作。

应该怎么做？

基础上的反应，我去一个JavaScript路线和修改上面的线是（身高/ 2）...

.attr('transform', 'translate(-' + yAxisSpacing + ',' + height/2 + ') rotate(-90)')

来源

2012-08-27 T. Stone

一个width属性在SVG 1.1 <的文本没有影响>。文本将围绕由x和y属性定义的x，y位置（由于text-anchor = middle）而居中（如果未指定它们，则默认为0）。之后，应用transform属性。

来源

2012-08-28 06:36:22

换句话说，我必须手动设置变换x，y以垂直居中使用javascript。我希望能够摆脱一种纯粹的CSS解决方案，它可以与页面大小一样流畅。 –

你可以用CSS做变换。这里

-webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
     transform: rotate(90deg); 
      filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
       M11=6.123031769111886e-17, M12=-1, M21=1, M22=6.123031769111886e-17, sizingMethod='auto expand'); 
      zoom: 1;

工作实例 - 看在 '样式表' 选项卡：添加到您的CSS（通过http://css3please.com）http://livecoding.io/3492918

来源

2012-08-27 22:27:18

在示例中，Y轴标签被旋转但不是垂直居中，这是我之后的部分。 –

如何在SVG中居中90º旋转文本

回答

相关问题