4

What I am trying to achieve using the SVG's textpath is the text to not rotate while it follows its animation path; so it stays horizontal while being animated, like this:

How I want text to behave while animating it using SVG's textpath:

Thing is that the text rotates to its current path angle while being animated by default, making the text to look like this:

How i do not want text to behave while animating it using the SVG's textpath:

How can I achieve to animate a text by using the SVG's textpath while keeping the text horizontal?.

Edit: As requested here is the code I used for the horizontal text; which I can not actually achieve to animate:

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

The source where I got this code was from this thread; horizontal text on path , which actually did help to me achieving to keep the text horizontal on a path, but rather not when trying to animate it using the SVG's textpath; when trying so the text displayed stays at the x="0" y="0" without moving.

Not the same way with the one that rotate its angle while moving though its path; that one actually animates as expected, here is its code too:

<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>
4
  • 1
    Maybe you could add your code for the animated text. This shows some research effort and will ease others the answer.
    – Bodo
    Sep 16, 2016 at 12:05
  • @Bodo Thanks for the advice; I just edited the main post adding the code of what I showed in the both previously attached pictures.
    – user6215161
    Sep 16, 2016 at 13:06
  • 1
    w3.org/TR/SVG/text.html#GlyphOrientation I found something, but unfortunatly it looks like Glyph Orientation is limited to 0, 90, 180 and 270 degree. Maybe you could send the characters instead the whole string along the path and seth the line-progression direction?
    – Bodo
    Sep 16, 2016 at 13:28
  • @Bodo I did tested that early, unfortunately it does not work on the text when it is being animated using the SVG's textpath.
    – user6215161
    Sep 16, 2016 at 23:42

1 Answer 1

2

There is no way to keep characters vertical with a <textPath>. But you can do it if you use a motion path (ie <animateMotion>).

However it's a bit of a pain because you have to animate each character individually.

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

1
  • While i needed a fast answer due needing this to enter a competition, this technique proved to be useful; actually it also can be tweaked using javascript to avoid repeating long code; i may post that solution in the main post soon; thanks you a lot, Paul LeBeau! = D
    – user6215161
    Sep 16, 2016 at 23:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.