svg moving text basic example

by IlyaB

HTML

<svg width="600px" height="200px" viewBox="0 0 600 200"
                  version="1.1" xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink">
                  <g id = "vehicleGroup2">
                      <rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" x="0" y="0" width="129" height="20" r="0" rx="0" ry="0" fill="none" stroke="#1300bd" class="mapSvgItem mapSvgRect vehicleLabelRect"></rect>
                      <text style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-size: 12px;" x="2" y="7" text-anchor="start" text="Buffalo shuttle - Driving" font="" stroke="none" fill="#1300bd" class="mapSvgItem vehicleLabelText" font-size="12px"><tspan dy="5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Buffalo shuttle - Driving</tspan></text>
                  </g>
              <svg>

JavaScript

var label = document.getElementById("vehicleGroup2");
                         move = function (){
                            var timePassed =  Date.now() -  startTime,
                                xOffset = Math.round(verticalSpeed * timePassed),
                                yOffset = Math.round(horisontalSpeed * timePassed);
                            if (xOffset <= toX) {
                             label.setAttribute("transform", "translate (" + xOffset + ", "+ yOffset+")");
                           } else {
                             label.setAttribute("transform", "translate (0,0)");
                             startTime = Date.now();
                           }
                           requestAnimationFrame(move);
                        };
                        var  duration = 10 * 1000,
                             toY = 100,
                             toX = 100,
                             verticalSpeed = toY/duration,
                             horisontalSpeed = toX/duration,
                             startTime = Date.now();
                        move();