3

I have a simple SVG example with <text> and <rect> elements. I would like it so that the <text> element behaves like an absolute positioned HTML element, so that it doesn't take up space (as opposed to relative or static positioned elements). Ideally, this would result in the word "hello" appearing within the blue square. Here is my code:

<svg width="130" height="130" viewBox="0,-14,100,114">
    <rect width="100" height="100" style="fill:#0094ff;" />
    <text>hello</text>
</svg>

enter image description here

Pershing
  • 406
  • 2
  • 10
  • Also keep in mind that there is no concept of relative positioning inside svg, its all defined in terms of coordinates. – Anurag Srivastava Mar 24 '20 at 18:12
  • @AnuragSrivastava thanks, I was getting hung up on the fact that text elements in SVG are positioned by their bottom-left corner (unlik HTML elements, which are positioned from the top-left) – Pershing Mar 24 '20 at 18:13

1 Answers1

2

Here is what you need to do.

where X and Y is the coordinates of the position, you can fillin whatever position you need.

Source: SVG

<svg class="svgIcon" width="130" height="130" viewBox="0,-14,100,114">
    <rect width="100" height="100" style="fill:#0094ff;" />
    <text x="0" y="12">hello</text>
</svg>
Manjuboyz
  • 6,978
  • 3
  • 21
  • 43