Make SVG text element absolute positioned (i.e. not take up space)?

user_13084038 0
Viewed 596

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

css-position svg css html
1 Answers

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>

user_35643590
Related