Question

全部

有一个双圈圆圈和一个文本。理想情况下，文本应显示在圆圈内，但在IE＆Firefox中，圆圈向下，文本在顶部。使用以下代码可以看到该问题。

非常感谢您提供有关如何在IE和firefox中进行修复的帮助或建议。

<div class="col-xs-4 col-sm-2">
      <div style="margin-top: 20px; position: relative; display: inline-block; max-width: 116px; max-height: 116px;">
        <svg width="100%" height="100%" viewBox="0 0 418 418" tabindex="-1">
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g transform="translate(-31.000000, -31.000000)" stroke="#9B9B9B" stroke-width="2" fill="#FFFFFF">
                    <g transform="translate(32, 32)">
                            
                        <path d="M208,416 C322.875228,416 416,322.875228 416,208 C416,93.124772 322.875228,0 208,0 C93.124772,0 -9.09494702e-13,93.124772 -9.09494702e-13,208 C-9.09494702e-13,322.875228 93.124772,416 208,416 Z"></path>
                        <path d="M208,398.666667 C313.302292,398.666667 398.666667,313.302292 398.666667,208 C398.666667,102.697708 313.302292,17.3333333 208,17.3333333 C102.697708,17.3333333 17.3333333,102.697708 17.3333333,208 C17.3333333,313.302292 102.697708,398.666667 208,398.666667 Z"></path>
                    </g></g></g>
                </svg>
        <span style="font-size: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">400</span>
      </div>
    </div>

Answer 1

您添加到div中的样式会将数字推送到SVG之外。我只想通过使用可以放置在svg中的SVG <text>元素来首先避免此问题。

您可能需要对x和y值进行一些调整。

ps：还有一个<circle>元素可以代替<path>。

<svg width="100%" height="100%" viewBox="0 0 418 418" tabindex="-1">
  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g transform="translate(-31.000000, -31.000000)" stroke="#9B9B9B" stroke-width="2" fill="#FFFFFF">
      <g transform="translate(32, 32)">
       <path d="M208,416 C322.875228,416 416,322.875228 416,208 C416,93.124772 322.875228,0 208,0 C93.124772,0 -9.09494702e-13,93.124772 -9.09494702e-13,208 C-9.09494702e-13,322.875228 93.124772,416 208,416 Z"></path>
        <path d="M208,398.666667 C313.302292,398.666667 398.666667,313.302292 398.666667,208  C398.666667,102.697708 313.302292,17.3333333 208,17.3333333 C102.697708,17.3333333 17.3333333,102.697708 17.3333333,208 C17.3333333,313.302292 102.697708,398.666667 208,398.666667 Z"></path>
      </g>
    </g>
  </g>
  <text x="47%" y="49%" style="font-size: 32px;">400</text>
</svg>

Answer 2

我不知道您的约束是什么，但是要特别渲染这些圆圈，我将使用border-radius: 50%和display: flex：

.circle {
  border: 2px solid #888;
  border-radius: 50%;            /* make the border a circle */
  display: flex;                 /* align the content vertically and horizontally */
  align-items: center;           /* same */
  justify-content: space-around; /* same */
}

<div class="circle" style="width: 100px; height: 100px;">
  <div class="circle" style="width: 90px; height: 90px;">
    400
  </div>
</div>

IE和Firefox渲染不正确，但在Chrome，Safari和Chromium浏览器中却没有

2 个答案: