SVGのテキストパスの使用中にテキストが回転しないようにテキストをアニメーション化するにはどうすればよいですか？

Question

SVGのテキストパスを使用して達成しようとしているのは、アニメーションパスの後に回転しないテキストです。アニメ化されながらそれはこのように、水平のまま：

シングは、デフォルトでは、アニメーションされながらテキストはテキストはこのように見えるようになって、その電流パスの角度に回転させることである：

テキストを水平に保ちながらSVGのテキストパスを使用してテキストをアニメーション化する方法を教えてください。

編集：ここで要求されているのは、水平のテキストに使用したコードです。私は実際にアニメーション化することができません：

<svg> 
<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"/> 

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

<text id="origText" fill="white"> 
    <textpath xlink:href="#MyPath" > 
    OH NOES!, DANCING TEXT ARRIVED! 

     <animate attributeName="startOffset" from="100%" to ="-100%" 
      begin="0s" dur="10s" repeatCount="indefinite" keyTimes="0;1" 
      calcMode="spline" keySplines="0 0 1 1"/> 
    </textpath> 
</text> 
</svg> 

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; 
} 

私はこのコードを入手したソースはこのスレッドから来ました。 horizontal text on path、実際には、パス上にテキストを水平に保つのに役立ちましたが、SVGのテキストパスを使用してテキストをアニメーション化しようとしていませんでした。テキストを表示しようとすると、移動せずにx = "0" y = "0"のままです。

パスを移動しながら角度を回転させるのと同じ方法ではありません。予想通り1つは、実際にアニメーション化し、ここでそのコードはあまりにもです：

<svg> 
    <path id="myPath2" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" 
    d="M91.4,344.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3 
c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7 
c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5 
c1.9-2.1,3.7-5.5,6.5-6.5"/> 
<text fill="red"> 
    <textpath xlink:href="#myPath2" > 
    PUMCHY PUMCHY PUMCHY PUMCHY! 
    <animate attributeName="startOffset" from="100%" to ="-100%" begin="0s" 
    dur="10s" repeatCount="indefinite" keyTimes="0;1" calcMode="spline" keySplines="0 0 1 1"/> 
    </textpath> 
</text> 
</svg> 

Answer 1

<textPath>と垂直文字を維持する方法はありません。しかし、あなたがモーションパスを使用するならばそれを行うことができます（すなわち、<animateMotion>）。

ただし、キャラクターを個別にアニメーション化する必要があるため、少し苦労します。

<svg width="500px" height="500px"> 
 

 
    <path id="myPath2" fill="none" stroke="lightgrey" stroke-miterlimit="10" 
 
    d="M91.4,344.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3 
 
c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7 
 
c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5 
 
c1.9-2.1,3.7-5.5,6.5-6.5"/> 
 

 
    <text fill="red" text-anchor="middle">! 
 
    <animateMotion dur="6s" repeatCount="indefinite"> 
 
     <mpath xlink:href="#myPath2"/> 
 
    </animateMotion> 
 
    </text> 
 

 
    <text fill="red" text-anchor="middle">Y 
 
    <animateMotion dur="6s" repeatCount="indefinite" begin="0.2s"> 
 
     <mpath xlink:href="#myPath2"/> 
 
    </animateMotion> 
 
    </text> 
 

 
    <text fill="red" text-anchor="middle">H 
 
    <animateMotion dur="6s" repeatCount="indefinite" begin="0.4s"> 
 
     <mpath xlink:href="#myPath2"/> 
 
    </animateMotion> 
 
    </text> 
 

 
    <text fill="red" text-anchor="middle">C 
 
    <animateMotion dur="6s" repeatCount="indefinite" begin="0.6s"> 
 
     <mpath xlink:href="#myPath2"/> 
 
    </animateMotion> 
 
    </text> 
 

 
    <text fill="red" text-anchor="middle">N 
 
    <animateMotion dur="6s" repeatCount="indefinite" begin="0.8s"> 
 
     <mpath xlink:href="#myPath2"/> 
 
    </animateMotion> 
 
    </text> 
 

 
    <text fill="red" text-anchor="middle">U 
 
    <animateMotion dur="6s" repeatCount="indefinite" begin="1.0s"> 
 
     <mpath xlink:href="#myPath2"/> 
 
    </animateMotion> 
 
    </text> 
 

 
    <text fill="red" text-anchor="middle">P 
 
    <animateMotion dur="6s" repeatCount="indefinite" begin="1.2s"> 
 
     <mpath xlink:href="#myPath2"/> 
 
    </animateMotion> 
 
    </text> 
 
</svg>