html - SVG 中的 View 框和图标定位

Question

我只有下面这个非常简单的 svg；

<div>
  <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>

FIDDLE HERE

svg 元素的 View 框是 viewBox="0 0 194 300" 并且图标上的 y 属性是 y="110" ，我的问题是，Y 属性是故意 110 吗？？

即如果我想将图标居中，我会执行以下操作:

(186/2)+ (height of icon/2) // 186 is the height of the viewbox

我假设 110 的值是根据视框的高度添加的，这是否正确？

Answer 1

110 的 y 值将由作者选择，以便使文本在圆圈中垂直居中。它与 viewBox 没有直接关系。它与圆心、文本大小 (22) 以及在某种程度上使用的任何字体的字形形状有关。例如，对于相同字体大小的不同字体，大写字母的高度可能会有所不同。

SVG 不提供任何自动垂直居中文本的方法。所以你必须手动定位文本。