html - 将 SVG 中的图标居中

Question

我有以下非常简单的 SVG:

<div id="circli" class="svg-container">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">
    <g stroke="#ccc">
      <line x1="133" y1="50" x2="140" y2="40" stroke-width="2"></line>
    </g>
    <g stroke="#ccc">
      <line x1="140" y1="40" x2="200" y2="40" stroke-width="2"></line>
    </g>
    <circle cx="100" cy="100" r="57" class="border" fill="#eee" stroke="none" stroke-width="15" stroke-dasharray="360" transform="rotate(-90,100,100)"></circle>
    <circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#3498DB" stroke-width="5" stroke-dasharray="180, 20000" transform="rotate(-90,100,100)"></circle>
    <text text-anchor="middle" x="100" y="110" class="icon" style="font-size: 40px" fill="#3498DB"></text>
    <text class="timer" text-anchor="middle" x="175" y="35" style="font-size: 22px; undefined;" fill="#aaa">50%</text>
  </svg>
</div>

我的问题与图标以及它如何居中有关，我不太理解此代码的作者如何将图标居中的背后的逻辑。图标和圆圈的代码如下所示:

<circle cx="100" cy="100" r="57" class="border" fill="#eee" stroke="none" stroke-width="15" stroke-dasharray="360" transform="rotate(-90,100,100)"></circle>
<circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#3498DB" stroke-width="5" stroke-dasharray="180, 20000" transform="rotate(-90,100,100)"></circle>
<text text-anchor="middle" x="100" y="110" class="icon" style="font-size: 40px" fill="#3498DB"></text>

注意 x , y <text> 上的属性像这样的元素:

 x="100" y="110"

现在，如果您在控制台中进行操作，您会发现除此之外的任何值都会使图标不再居中。

我不太理解将图标居中的逻辑。有人可以解释一下吗？

附注我相信y值为 110为了抵消图标的大小，例如垂直对齐绝对定位元素时的负边距。

<强> FIDDLE HERE有人可以向我解释一下吗？

Answer 1

由于两个属性值对，图标居中:

• 由于 text-anchor = 'middle' 属性，它水平居中。当文本 anchor 设置为 middle 时，文本的位置使得文本中心位于作为 text 属性给出的 x 坐标处 标签。以下是MDN讲述了这个属性值对。

  middle

  The rendered characters are aligned such that the middle of the text string is at the current text position. (For text on a path, conceptually the text string is first laid out in a straight line. The midpoint between the start of the text string and the end of the text string is determined. Then, the text string is mapped onto the path with this midpoint placed at the current text position.)

  此处创建的圆的中心位于 (100,100)，因此设置文本 x='100' 并设置 text-anchor = 'middle'将文本定位在圆的水平中心。

• 由于 y 属性的值，它垂直居中。这涉及基于font-size 和text 的font 进行试验和错误。在本例中，font-size: 40px 表示框的高度约为 26 个单位。这意味着设置 y = '113' 实际上会将文本设置在垂直中间(准确地说)。 y = '100' 的值并未将其置于精确的中心位置。

  在下面的代码片段中，我们可以看到字体大小如何影响 y 属性的值。基本上，y 的值应设置为一半文本位于中心上方，其余文本位于中心下方。因此，y 大致为中心点 +(文本高度/2)。

  正如 Lea Verou 在 this article 中所解释的那样，有一个名为 dominant-baseline: middle; 的属性，它可以将文本垂直居中，而不需要进行此类计算，但浏览器支持很差。

  .svg-container {
    max-width:200px;
  }

  <div id="circli" class="svg-container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">
      <g stroke="#ccc">
        <line x1="133" y1="50" x2="140" y2="40" stroke-width="2"></line>
      </g>
      <g stroke="#ccc">
        <line x1="140" y1="40" x2="200" y2="40" stroke-width="2"></line>
      </g>
      <circle cx="100" cy="100" r="57" class="border" fill="#eee" stroke="none" stroke-width="15" stroke-dasharray="360" transform="rotate(-90,100,100)"></circle>
      <circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#3498DB" stroke-width="5" stroke-dasharray="180, 20000" transform="rotate(-90,100,100)"></circle>
      <text text-anchor="middle" x="100" y="113" class="icon" style="font-size: 40px" fill="#3498DB"></text>
      <text class="timer" text-anchor="middle" x="175" y="35" style="font-size: 22px; undefined;" fill="#aaa">50%</text>
    </svg>
  </div>
  
  <div id="circlj" class="svg-container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">
      <g stroke="#ccc">
        <line x1="133" y1="50" x2="140" y2="40" stroke-width="2"></line>
      </g>
      <g stroke="#ccc">
        <line x1="140" y1="40" x2="200" y2="40" stroke-width="2"></line>
      </g>
      <circle cx="100" cy="100" r="57" class="border" fill="#eee" stroke="none" stroke-width="15" stroke-dasharray="360" transform="rotate(-90,100,100)"></circle>
      <circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#3498DB" stroke-width="5" stroke-dasharray="180, 20000" transform="rotate(-90,100,100)"></circle>
      <text text-anchor="middle" x="100" y="109.5" class="icon" style="font-size: 30px;" fill="#3498DB"></text>
      <text class="timer" text-anchor="middle" x="175" y="35" style="font-size: 22px; undefined;" fill="#aaa">50%</text>
    </svg>
  </div>