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"

现在，如果您在控制台中玩游戏，您会注意到除此之外的任何值都会使图标不再居中。

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

P.S。我认为y值为110来抵消图标的大小，例如在垂直对齐绝对定位元素时的负边距。

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

Answer 1

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

由于text-anchor = 'middle'属性，它是水平居中的。当文本锚点设置为middle时，文本的位置应使文本的中心位于x坐标，该坐标是text标记的属性。以下是MDN关于此属性 - 值对的说明。

<强>中间

对齐渲染的字符，使文本字符串的 中间位于当前文本位置 。（对于路径上的文本，概念上文本字符串首先以直线排列。确定文本字符串开头和文本字符串结尾之间的中点。然后，将文本字符串映射到路径上此中点位于当前文本位置。）

此处创建圆圈使其中心位于（100,100），因此设置文本x='100'并设置text-anchor = 'middle'将文本放置在圆的水平中心。
< / LI>
由于y属性的值，它是垂直居中的。这涉及基于font-size的{{1}}和font的试错。在这种特殊情况下，text表示盒子的高度大约为26个单位。这意味着设置font-size: 40px实际上将文本设置在垂直中间（准确地说）。 y = '113'的值并未将其置于准确的中心位置。

在下面的代码段中，我们可以看到font-size如何影响y = '100'属性的值。基本上y的值应设置为使文本的一半高于中心，其余文本将低于中心。因此，y大致为中心点+（文本高度/ 2）。

正如Lea Verou在this article中所解释的那样，有一个名为y的属性，它将垂直居中，无需进行此类计算，但浏览器支持较差。
＆＃13;
＆＃13;
```
dominant-baseline: middle;
```
＆＃13;
```
.svg-container {
  max-width:200px;
}
```
＆＃13;
＆＃13;
＆＃13;

在SVG中居中图标

1 个答案: