text-anchor=“start”不将text元素移动到svg元素的开头。

Question

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

<text class="timer" text-anchor="middle" x="175" y="35" style="font-size: 22px; undefined;" fill="#aaa">50%</text>

现在，如果我更改text-anchor=“start”，text元素并没有真正移动到svg元素的开头，而是移动到它下面一行的开头，为什么？有人能解释一下为什么text-anchor=“start”没有按预期工作吗？

Answer 1

text-anchor用于决定文本的X位置应该在文本的开头、结尾还是中间。要移动文本位置，请更改它的X和Y坐标。

要将文本放在SVG的开头：

x="0"
text-anchor="start"

要将文本放在SVG的末尾：

x="194" //Width of the svg
text-anchor="end"

x="97" //Half of the width of the svg
text-anchor="middle"