Why is an element overlapping another element I designed to be in foreground with z-index?

Question

Hi there,
I created two svg elements, a text and a circle.
I've put the text element before the circle to get sure it will overlap it. But circle is over instead.
Then I used z-index in CSS to fix and it still not work.
Could anybody help me to fix that? Thanks a lot in advance!
[PRIVATE CODE]

Answer 1

if you want the <text> to appear on the top of <circle>, you must add it AFTER the circle and NOT before.

...or you can <use xlink:href="#ID_OF_TEXT"/>

Answer 2

You replied at the exact moment I fixed the issue looking at another code. 😂😂
But thank you very much!!