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

【问题标题】：How to center 90º rotated text in SVG如何在 SVG 中将 90º 旋转文本居中
【发布时间】：2012-09-13 00:50:19
【问题描述】：

使用 D3，我想要一个 Y 轴标签，它旋转 -90º 并以 Y 轴为中心。我认为这将是小菜一碟，并写了以下内容：

// 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 类型属性，以便 width 处理 <text> 元素。

这应该怎么做？

根据回复，我使用 javascript 路由并将上面的行修改为 (height/2)...

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

【问题讨论】：

标签： svg d3.js

【解决方案1】：

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

【讨论】：

所以换句话说，我必须手动将变换 x,y 设置为使用 javascript 垂直居中。我希望能够摆脱一个纯 CSS 解决方案，它可以随着页面大小而变化。

【解决方案2】：

您可以使用 CSS 转换来做到这一点。将此添加到您的 CSS（通过 http://css3please.com）：

-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://livecoding.io/3492918

【讨论】：

在示例中，Y 轴标签已旋转但未垂直居中，这是我所追求的部分。