Question

我有以下HTML代码，在红色svg框架圆圈上方呈现一个数字，它再次位于图标/图像的顶部。目前svg中的文本为'8'，呈现精细。但是，如果我改变测试到两位数，位置变化。如何使它相对于svg框架的位置？你可以在这里试试HTML：

    .icon {
      width: 30px;
      height: 30px;
      position: relative;
    }
    .txt {
      position: absolute;
      top: 5px;
      left: 15px;
    }
    .text {
      background: ;
      font-size: xx-small;
      position: absolute;
      top: 6px;
      left: 19px;
      color: white
    }

<div class="icon">
  <img src="http://betanews.com/wp-content/uploads/2015/06/win10-logo.jpg" alt="none" width="100%" height="100%" />
  <svg class="txt" xmlns="http://www.w3.org/2000/svg">
    <circle cx="6.5" cy="6.5" r="6.5" fill="red" />
  </svg>
  <div class="text">8</div>
</div>

Answer 1

我重新安排了一些事情，但这似乎可以解决问题。甚至可以使用三位数。有点狭窄，但它确实有效。

http://codepen.io/Fortyseven/pen/ZGwOvR

<style>
    .icon { 
        background:      url("http://betanews.com/wp-content/uploads/2015/06/win10-logo.jpg");
        background-size: 30px 30px;
        width:           30px; 
        height:          30px;
    }
    .badge { 
        position:      relative;
        top:           5px;
        left:          15px;
    }
    .badge svg, 
    .badge .text {
        width:  15px;
        height: 15px;
    }
    .badge .text { 
        font-size:  xx-small;
        color:      white;
        position:   absolute;
        text-align: center;
        top:        1px;
        left:       -1px;
    }
</style>
<div class="icon">
    <div class="badge">
        <svg xmlns="http://www.w3.org/2000/svg"><circle cx="6.5" cy="6.5" r="6.5" fill="red" /></svg>
        <div class="text">99</div>
    </div>  
</div>

Answer 2

您可以使用svg <text>元素并将其text-anchor属性设置为SelectListItem，使其居中。

＆＃13;

middle

＆＃13;

.icon {
      width: 30px;
      height: 30px;
      position: relative;
    }
.txt {
      position: absolute;
      top: 5px;
      left: 15px;
    }

＆＃13;

在HTML5中制作相对于背景svg的文本

2 个答案: