SVG文本锚左上

Question

默认情况下，SVG中text元素的锚点位于左下角，但我希望它位于左上角，因为我还创建了一个矩形作为文本的背景，但是由于显示不正确，文本高于矩形（因为矩形的锚点/偏移量位于左上方）。有没有办法解决此问题，因此可以在相同的坐标处绘制文本和矩形，并在相同的位置显示它们。

Answer 1

在主导基线属性/属性为我工作：

svg {
  dominant-baseline: hanging;
}

Answer 2

您为文本元素提供的坐标 (x和y) 将用作文本的基线。这是有道理的，因为如果同一行上有不同字体大小的文本，您会希望它们的基线对齐。

没有“自动”的方式来做你想做的事。SVG 元素始终是绝对定位的。

您只需将坐标调y大一点，将文本向下移动一点即可。

或者，您可以添加一个dy属性来将文本向下移动一点。或者甚至使用transform属性来执行相同的操作。但使用这些方法中的任何一种都不会真正为您简化流程。