SVG kullanarak, bir yolun merkezine metin eklemek ve yatay olarak hizalamak mümkün mü?

Question

Bir yolun ortasına metin eklemek ve yol boyunca hizalamak için NOT hizalamak istiyorum.

Aşağıdaki metnin merkezdeki yol boyunca ilerlemesini sağlıyorum, ancak yolun hangi açıya baktığına bakılmaksızın yatay olmasını sağlamak istiyorum.

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

Answer 1

Eğer doğru anlamak Tek tek her bir harf (yani Kuzey işaret) ama yolu takip düz olmanın peşinde. Böyle bir şey:

akım SVG standard bakıldığında bu görünmüyor mümkün olduğunu. yatay metin düzen akışları için

, belirli bir glif referans yönelimi glif bağlandığı yolunda kesişme noktasında başlar ve vektör olan yönde 90 puan kesişme noktasında de eğrisi açısı saat yönünün tersine derece.

görüntü yukarıdaki SVG oluşturulur ancak bu döndürme özelliğini uygulayarak her harfe ayrı karakter aralığı (rotasyon) uygulayarak (eğer kusurları görebileceğiniz gibi) elde edildi:

<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 komut dosyasında gerekli ayarlamaları oldukça kolay bir şekilde hesaplayabilir:

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