Impossible d'obtenir l'élément HTML sur le dessus d'un autre élément

Question

modifié pour expliquer la différence entre la question liée:

Le problème que j'ai est différent comme: 1. Les éléments que je veux superposer ne sont pas liés 2. Ce sont svg éléments

Quelqu'un peut-il suggérer une solution de travail pour ces circonstances s'il vous plaît? Je veux fondamentalement mettre tous les éléments de texte au-dessus des éléments de chemin. Il semble que je suis les règles standard (éléments positionnés avec l'ensemble z-index) pour cela mais cela ne fonctionne pas. Pourquoi donc?

text { 
 
    position: fixed; 
 
    z-index: 2 
 
} 
 
path { 
 
    position: relative; 
 
    z-index: 1 
 
}

<svg width="1191" height="751"><g id="holdDonut" transform="translate(595.5,375.5)"> 
 
    <g class="arc"> 
 
    <path d="M2.238042025441788e-14,-365.5A365.5,365.5,0,0,1,13.18655527399621,-365.2620494384899L6.593277636998105,-182.63102471924495A182.75,182.75,0,0,0,1.119021012720894e-14,-182.75Z" style="fill: rgb(152, 171, 197);"></path> 
 
    <text transform="translate(4.9457632502712405,-274.0803806383672)" dy=".35em">28</text></g> 
 
    <g class="arc"> 
 
    <path d="M13.18655527399621,-365.2620494384899A365.5,365.5,0,1,1,-6.714126076325364e-14,-365.5L-3.357063038162682e-14,-182.75A182.75,182.75,0,1,0,6.593277636998105,-182.63102471924495Z" style="fill: rgb(138, 137, 166);"> 
 
    </path> 
 
    <text transform="translate(-4.9457632502711455,274.0803806383672)" dy=".35em">3 086</text> 
 
    </g> 
 
    </g> 
 

https://codepen.io/anon/pen/jLGGpz

Answer 1

Essayez de déplacer l'élément text ci-dessus à l'élément path