Zone html à la même taille que le svg

Bonjour, suite à ce message sur le forum (https://forum.alsacreations.com/topic-27-80821-1.html), j'ai un second soucis de positionnement.

J'aimerais avoir une <div> qui se superpose à ma balise <svg> tout en ayant la même taille.

En effet, le svg est un rectangle d'un ratio variable (il peut être en format portrait ou paysage). Je connais donc son ratio à l'initialisation.

Ma première tentative : positionner à l'aide de javascript fonctionne bien.
Néanmoins, j'espérais une solution en full css.
Voici un début moyennement concluant : http://codepen.io/anon/pen/OpdJEW

Ps : je précise que j'ai déjà tenté d'utiliser la balise <foreignObject> pour résoudre ce soucis.
Le positionnement se fait bien mais je rencontre d'autres soucis bien plus délicat. (lié sans doute à une implémentation branlante de la plupart des navigateurs)
Modifié par moths-art (01 Apr 2017 - 11:41)

Bonjour,

Pourquoi superposer la div sur le SVG ? N'aurait-il pas été plus simple de l'englober ?

J'ai effectivement pensé à cette éventualité mais mon soucis reste équivalent : comment contraindre une <div> à garder un ratio proportionnel déterminé par la hauteur. (height: 100%)

Pour donner une idée de mon usage final, voici un imprim écran du pourquoi :
j'aimerais disposer des indices (draggable) par dessus mon svg.

Modifié par moths-art (02 Apr 2017 - 16:28)