горизонтальный текст по пути

Question

Есть ли способ не повернуть текст в текстовом пути html svg, чтобы цифры оставались горизонтально выровненными?

<svg> 
    <path id="line" d="..." fill="none" /> 
    <text> 
     <textPath id="ptext" xlink:href="#lineAB" startOffset="0"> 
     </textPath> 
    </text> 
</svg> 

Click here for an image to show what I mean.

Answer 1

Используя этот mozilla source как шаблон, вот мой пример. Не 100% соответствует кривой, поскольку каждая ширина символа не фиксирована, в то время как мое кодирование предполагает иное. Имел этот код в моей голове в течение 3 лет (да, не шучу!).

(Оставьте его читателям, чтобы попытаться получить лучшее совпадение; подсказка: используйте BBox() для каждого символа, затем скорректируйте значениеи steps).

var t = document.getElementById('origText'); 
 
var t_text = t.textContent; // "We go up...." 
 
var curve = document.getElementById("MyPath"); 
 
var len = curve.getTotalLength(); // curve length 
 

 
var steps = len/t_text.length; // get width of step 
 
var start_pt = 0; // start at beginning 
 
var prev_pt = curve.getPointAtLength(0); // measure first step 
 

 

 
t.textContent = ""; // clear up original text; 
 

 
for (var i = 0; i < t_text.length; ++i) { // char loop 
 
    var new_pt = curve.getPointAtLength(start_pt); // measure pt 
 
    var ts = genTspan(t_text[i], prev_pt, new_pt); // tspan 
 
    t.appendChild(ts); // add to <text> 
 

 
    start_pt += steps; // go to next step (point) 
 
    prev_pt = new_pt; // remember previous point 
 
} 
 

 
function genTspan(myChar,prev_pt,new_pt) { 
 
    var tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan"); 
 
    tspan.setAttributeNS(null, 'dy', new_pt.y - prev_pt.y); 
 
    tspan.textContent = myChar; 
 
    return tspan; 
 

 
}

<svg id="mySVG" width="450" height="200" viewBox="0 0 900 400" 
 
    xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <defs> 
 
    <path id="MyPath" 
 
      d="M 100 200 
 
      C 200 100 300 0 400 100 
 
      C 500 200 600 300 700 200 
 
      C 800 100 900 100 900 100" /> 
 
    </defs> 
 

 
    <use id="curve" xlink:href="#MyPath" fill="none" stroke="red" /> 
 

 
    <text x="90" y="200" id="origText" font-family="Verdana" font-size="36">We go up, then we go down, then up again</text> 
 

 
</svg>