图像上的动态文本位置

Question

我有上面的图像，其中各个方面的大小被覆盖并以字母的形式显示;其中一些是e，s，d;应该是动态来自数据库的数字。

我知道如何通过后端实现这一点但是我不太确定这些数字如何动态放置在图像上。

任何帮助都将得到帮助。

Answer 1

这就是我使用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>

的CSS：

.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;

}

css基本上放在标签上，你可以将它放在你想要的图像上。

Answer 2

如果您不想使用SVG，则需要将img放入div position: relative，然后您可以使用{{1}添加数字}和top css属性需要去的地方

https://jsfiddle.net/stevenkaspar/pk9bfzcw/

left

Answer 3

使用svg

如果需要，

使用javascript对其进行动画处理。

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>