Angularjs 如何更改svg文本的方向

我正在尝试将文本Y标签的方向设置为从上到下-我让它从下到上工作，但更改旋转并不适合我

这是我的扑克牌-

感兴趣的代码是

 svg.append("text")
          .attr("class", "y label")
          .attr("text-anchor", "end")
          .attr("y", -width/12 )
          .attr("x", -height/3) 
          .attr("dx","-5em")
          .attr("dy", "-.75em")
          .attr("transform", "rotate(-90)")
          .text(yLabel);

使用-90时，Y标签“Value”从下到上，但我想要的是“top”到“bottom”

（我尝试了-270，但只看到文本从屏幕上消失。我显然不理解旋转变换是如何工作的）

---

旋转后，您需要通过y轴偏移和高度偏移来平移文本（文本围绕元素的指定x和y旋转，而不是像您预期的那样围绕显示文本的中心旋转）。例如，将您的translate修改为this就可以完成这项工作（您需要适当地使用变量，我只是插入了用作示例的数字）：

---

您还可以修改

x

和

y

，使其成为文本元素的中心（使用

dx

和

dy

适当偏移），以便文本围绕中心点旋转，这可能是更干净的方法，但我倾向于只做一个平移修复，然后就上路了。

完全没有必要费劲地计算旋转元素的偏移量。你最终只会得到一堆丑陋的数字，对任何人来说都毫无意义，这将是一场噩梦

SVG渲染器可以为您完成所有这些计算。只需使用

元素将坐标原点转换为您感兴趣的位置，然后进行旋转。然后，该元素的父对象将围绕该元素旋转，而不是围绕某个遥远的无关位置旋转

这里有一个快速的黑客向你展示它是如何工作的。您可能需要调整一些值，但我希望您了解情况

svg.append（“g”）
.attr（“变换”、“平移”（“+宽度*0.1+”，“+高度*0.45+”）
.append（“文本”）
.attr（“类别”、“y标签”）
.attr（“文本锚定”、“结束”）
.attr（“变换”、“旋转（-90）”）
.文本（yLabel）；

谢谢。这是可行的，但我不明白它为什么有效。你是如何得出75和350这两个数字的？我假设它是svg宽度和高度的某种函数。元素的“x”和“y”是什么意思；您是指文本元素本身吗？是的，文本元素的x和y属性。这是旋转的原点。有更多的信息在和更多的事情，你可以做的文字开始在。我展示的另一种方法是将一个新的原点传递给旋转。

.attr("transform", "translate(-75, 350) rotate(90)")