Dynamische Textposition auf Bild

Question

Ich habe das obere Bild, in dem die Größe der verschiedenen Aspekte abgedeckt ist und in Form von Buchstaben dargestellt; einige davon sind e, s, d; sollten Zahlen sein, die dynamisch aus der Datenbank kommen.

Ich weiß, wie man dies durch Backend erreicht, aber ich bin mir nicht sicher, wie diese Ziffern dynamisch über das Bild platziert werden können.

Jede Hilfe wird von gr8 Hilfe sein.

Answer 1

Wenn Sie wollen keine SVG verwenden, müssen Sie die img in einem div setzen, die position: relative hat und dann können Sie die Nummern anhängen mit top und left CSS-Attribute, wo sie

https://jsfiddle.net/stevenkaspar/pk9bfzcw/ gehen müssen

<div style='position: relative;' id='imageContainer'> 
    <img src='http://i.stack.imgur.com/k9vQS.jpg'/> 
</div> 

<script> 
var letter = { 
    label: '5', 
    top: 80, 
    left: 5 
} 

var letter_elem = document.createElement('span'); 
letter_elem.style.top = letter.top + '%'; 
letter_elem.style.left = letter.left + '%'; 
letter_elem.innerHTML = letter.label; 
letter_elem.className = 'number'; 

document.getElementById('imageContainer').appendChild(letter_elem); 
</script> 

<style> 
.number { 

    position: absolute; 
    top: -1000px; 
    left: -1000px; 
    font-size: 28px; 
    min-width: 32px; 
    background: #fff; 
    text-align: center; 

} 
</style> 

Answer 2

Dies ist, wie ich es css

<div class="col-xs-6 form-group media"> 
    <div class="outerWrapper"> 
     <img title="blockMeasurement" class="center-block" src="/resources/images/image.png" />   
       <span class="badge">{{dynamicdata}}</span> 
     </div> 
</div> 

mit CSS tun würde:

auf dem Tag

.media img+span.badge{ 
    position: absolute; 
    right:-5px; // change this to the position you want over the image 
    top:0px;//change this appropriately 
    height:2rem; 
    width:2rem; 
    line-height: 2rem; 
    font-size: 1rem; 
    text-align: center; 
    color:white; 
} 
.outerWrapper{ 
    position:relative; 
    display:inline-block; 
    padding-left: 150px; 

} 

Die CSS im Grunde stellt das und Sie können es positionieren wherevr Sie auf das Bild möchte.

Answer 3

Verwendung svg

mit Javascript belebtes es, wenn nötig.

svg { 
 
    width: 250px; 
 
} 
 
#shape1 { 
 
    stroke-width: 5; 
 
} 
 
#shape2 { 
 
    stroke-width: 5; 
 
}

<svg viewBox="0 0 210 150"> 
 
    <g id="shape1"> 
 
    <rect x="30" y="10" width="40" height="80" fill="none" stroke="black" /> 
 
    <line x1="10" x2="90" y1="40" y2="40" stroke="#aa3eee" /> 
 
    <text x="110" y="50" transform="rotate(-90, 110, 50)" font-size="25px">30</text> 
 
    <line x1="30" x2="30" y1="130" y2="90" stroke="red" /> 
 
    <line x1="70" x2="70" y1="130" y2="90" stroke="red" /> 
 
    <text x="0" y="120" font-size="25">30</text> 
 
    </g> 
 
    <g id="shape2"> 
 
    <rect x="130" y="40" width="70" height="70" fill="none" stroke="black" /> 
 
    <line x1="130" x2="130" y1="130" y2="110" stroke="red"/> 
 
    <line x1="200" x2="200" y1="130" y2="110" stroke="red"/> 
 
    <text x="150" y="132" font-size="25">30</text> 
 
    </g> 
 
</svg>