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元素的视图框是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

作者将选择y值为110，以便将文本垂直居中于圆圈中。它与viewBox没有直接关系。它与圆的中心，文本的大小（22）有关，并且在某种程度上与正在使用的任何字体的字形的形状有关。例如，在给定相同字体大小的情况下，大写字母的高度可能因字体不同而不同。

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

Answer 2

都能跟得上

dominant-baseline="central"
x="100"

100是圆的垂直中心（圆圈元素中为ry），dominant-baseline将文本Y坐标设置为文本的垂直中心。

SVG中的视图框和图标定位

2 个答案: