text-anchor = "start"テキスト要素をsvg要素の先頭に移動しません。

Question

I以下の本当にシンプルな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要素について、どのようにテキストアンカー属性はそれで動作している：

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

今なら、私変更text-anchor="start"、テキスト要素は本当にsvg要素の先頭に移動しません、むしろその下の行の先頭に移動します、なぜですか？誰も理由を説明することができますtext-anchor="start"は、期待どおりに動作していないのですか？

Answer 1

text-anchorは、テキストのX位置がテキストの先頭、末尾、または中央にあるかどうかを判断するために使用されます。テキストの位置を移動するには、X座標とY座標を変更します。 SVGの真ん中にテキストを配置するには

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

：SVGの末尾にテキストを配置するには

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

：SVGの開始時にテキストを配置する

：

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