SVG Text-anchor top left

Question

By default, the anchor for the text element in SVG is at the bottom left, but I want it to be at the top left, since I am also creating a rectangle to act as the background for the text, but it is displayed incorrectly since the text is higher than the rectangle (because rectangle anchor/offset is at the top left). Is there a way to fix this, so both text and rectangle can be drawn at same coordinates and be displayed in the same location.

Answer 1

The dominant-baseline property/attribute worked for me:

svg {
  dominant-baseline: hanging;
}

Answer 2

The coordinates (x and y) you supply for text elements is used as the baseline of the text. This makes sense because if there is text with varying font sizes on the same line, you would want their baselines to line up.

There is no "automatic" way to do what you want. SVG elements are always absolutely positioned.

You will just have to move the text down a bit by making the y coordinate a bit larger.

Alternatively, you could add a dy attribute to shift the text down a bit. Or even use a transform attribute to do the same. But using either of those methods wouldn't really be simplifying the process for you.