Comment réparer un DIV en position contre un arrière-plan SVG?

J'ai une page web très simple que j'essaie de construire. Il a une balise img incluant un fichier image SVG qui va jusqu'à 100% de la largeur de la page. J'ai aussi une collection de DIVs que je voudrais "fixer" en place par rapport à l'image.Comment réparer un DIV en position contre un arrière-plan SVG?

J'ai commencé avec le positionnement absolu en utilisant ems, mais je me suis rendu compte rapidement que je devrais passer à des pourcentages si je voulais que les divs restent en place par rapport à l'arrière-plan de mise à l'échelle. Mais j'ai réalisé que le problème est que parce que mon SVG varie en raison des changements de largeur de la page, je ne peux pas définir un bon pourcentage de hauteur parce que la hauteur peut être affectée lorsque la largeur de la fenêtre change. le rapport d'aspect du SVG.

Des suggestions sur une approche? J'ai l'impression de manquer quelque chose de fondamental ici.

Voici un exemple de ma page:

<html> 
<head> 
<style> 
    .box{ 
     width: 4.0em; 
     height:3.0em; 
     background-color: yellow; 
     position: absolute; 
    } 
    #a{ left:6.4%; top:16.0%; } 
    #b{ left:6.4%; top:23.0%; } 
    /* This doesn't work. The DIVs aren't fixed relative to bg.svg. */ 
</style> 
<body> 
    <img src="bg.svg" width="100%" /> 
    <div class="box" id="a"></div> 
    <div class="box" id="b"></div> 
</body>

Source

2010-11-22 moople

définir un un haut identique et une position gauche pour .box et img, de cette façon les deux divs et l'image ont le même point « d'ancrage » et vous pouvez positionner les divs par rapport à ce point d'ancrage.

img { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 
.box{ 
    width: 4.0em; 
    height:3.0em; 
    background-color: yellow; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
#a{ left:20px; top:20px; } 
#b{ left:20px; top:20px; }

voir ici: http://jsfiddle.net/SebastianPataneMasuelli/hP6Dg/1/

Source

2010-11-22 03:56:16

Cela ne semble pas le faire. Le SVG évolue toujours différemment des boîtes lors du redimensionnement de la fenêtre. – moople

Comment réparer un DIV en position contre un arrière-plan SVG?

Répondre

Questions connexes