Почему атрибут SVG tspan y изменяет горизонтальное выравнивание текста?

Question

HTML:

<svg> 
    <g transform="translate(100, 100)"> 
     <circle r="3"></circle> 
     <text text-anchor="middle"> 
      Test<tspan y="2">xxxxxxxxxxxxxx</tspan> 
     </text> 
    </g> 
</svg> 

перекрывать x «s с Test. Я не понимаю, почему это происходит. Если я удалю атрибут text-anchor, это не произойдет.

Демо: http://jsfiddle.net/dvt4nv94/2/

Answer 1

указав х или у атрибута делает tspan быть абсолютно позиционирован так, как будто она существует сама по себе, а не как часть <text> контейнера.

установка dy = "2", а не y = "2" позволит достичь желаемого эффекта.