web-dev-qa-db-fra.com

Comment placer des éléments HTML sur SVG en ligne

Je suis capable d'utiliser z-index pour mettre divers éléments HTML les uns sur les autres dans l'ordre que j'aime, sauf quand l'un des éléments d'un SVG en ligne. Par exemple, étant donné le code HTML

<div>
    <p>Text before SVG. I'm some boring text. Such incredibly boring text. Who would possibly want to read such boring text?</p>
    <svg version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <circle cx="75" cy="40" r="20" fill="red" />
    </svg>
</div>
<div>
    <svg version="1.1" baseProfile="full" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <circle cx="75" cy="75" r="20" fill="red" />
    </svg>
    <p>SVG before text. I'm some boring text. Such incredibly boring text. Who would possibly want to read such boring text?</p>
</div>

et le CSS correspondant

p {
    width: 200px;
    z-index:10;
}
div {
    position: relative;
}
svg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

peu importe comment je commande les deux ou ajuste le z-index, le SVG en ligne s'affiche en haut du texte. Comment puis-je obtenir le SVG derrière le texte?

L'exemple ci-dessus est disponible sur https://jsfiddle.net/o0n10j78/1/ .

Si c'est pertinent, dans mon application actuelle, je génère presque toute la structure du document en Javascript avec l'aide de jQuery, y compris le SVG en ligne et le bloc HTML que je souhaite avoir devant.

htmlcsssvg
12
Alan De Smet

La propriété z-index n'est appliquée qu'aux éléments positionnés. Ajouter position: relative; à la balise de paragraphe l'appliquera correctement.

Regardez cette page pour une référence complète de la propriété.

Sur une note latérale: Comme je l'ai écrit pour la première fois dans un commentaire, définir le svg z-index sur -1 fonctionne car il réduit la priorité de l'élément en dessous de la valeur par défaut que tous les éléments ont. Cela vient avec l'inconvénient que le svg est également placé derrière le div. Essayez d'appliquer une couleur d'arrière-plan à la div tout en ayant le z-index svg réglé à -1.

28
Hoshts

Veuillez ajouter un z-index:-1 au svg.

svg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
10
Fazil Abdulkhadar