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

Question

使用 D3，我想要一个旋转 -90º 并以 Y 轴为中心的 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图表，然后其中的文本将成为垂直居中。情况似乎并非如此 - 或者 - 有一些魔法display:block为了 width，我需要在 SVG 中设置 type 属性在 <text> 上工作元素。

这应该怎么做？

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

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

Answer 1

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