Korzystając z SVG, można dodać tekst do środka ścieżki i wyrównać go w poziomie?

Question

Chcę dodać tekst do środka ścieżki i wyrównać go w poziomie, NOT wyrównać wzdłuż ścieżki.

Mam następujący tekst biegnący wzdłuż ścieżki w środku, ale chcę wyświetlić go tak, aby był poziomy, bez względu na to, pod którym kątem zmierza ścieżka.

<text text-anchor="middle"> 
    <textPath xlink:href="#SomePath" startOffset="50%">Some Text</textPath> 
</text> 

Answer 1

Jeśli dobrze rozumiem, jesteś po każdy indywidualny list są proste (tj wskazując na północy), ale po drodze. Coś takiego:

Patrząc na aktualną SVG standard to nie wydaje się być możliwe.

dla poziomego przepływu układu tekstu orientacja odniesienia dla danej glif jest wektorem, który zaczyna się w punkcie przecięcia na ścieżce którego przyłączona jest nadlewka i które punktów w kierunku 90 stopni przeciwnie do ruchu wskazówek zegara pod kątem krzywa na przecięciu punktu.

Obraz powyżej jest generowany z SVG, ale ten został osiągnięty (jak widać z niedoskonałościami) poprzez zastosowanie indywidualnego kerningu (obrót) do każdej litery stosując obracania atrybut:

<text id="text2897"> 
    <textPath xlink:href="#path2890" id="textPath3304"> 
     <tspan 
     rotate="69.238731 53.737518 40.30315 24.801943 358.96658 358.96658 4.1336575 357.93317 351.73267 351.73267 351.73267 348.63242 343.46533 343.46533 346.56558 347.599 347.599 347.599 347.599 347.599 347.599 346.56558 345.53217 344.49875 343.46533" 
     id="tspan2899"> 
     Some sample text for path 
     </tspan> 
    </textPath> 
    </text> 

Answer 2

You można łatwo obliczyć niezbędne zmiany w skrypcie:

var tp = document.getElementById("textpath"); 
var rotate = ""; 
for(var i = 0; i < tp.getNumberOfChars(); i++) 
{ 
    rotate += -tp.getRotationOfChar(i) + " "; 
} 
tp.setAttribute("rotate", rotate);