Different types of moving svg text

http://www.w3.org/TR/SVG/animate.html

basic example



    
    
    Buffalo shuttle - Driving

http://jsfiddle.net/IlyaB/y6aryu5m/

basic example (text-rendering: geometricPrecision )




Buffalo shuttle - Driving

basic example (more thick text)





Buffalo shuttle - Driving

our external svg file - sample

http://jsfiddle.net/IlyaB/y6aryu5m/1/

svg as href of image

http://jsfiddle.net/IlyaB/y6aryu5m/3/

base64 as href of image

http://jsfiddle.net/IlyaB/y6aryu5m/4/

png as href of image

http://jsfiddle.net/IlyaB/y6aryu5m/5/

embeded html foreignObject



  
     Buffalo shuttle - Driving

http://jsfiddle.net/IlyaB/y6aryu5m/6/

animateTransform instead of animateMotion



    
    Buffalo shuttle - Driving

http://jsfiddle.net/IlyaB/y6aryu5m/7/

css animation

http://jsfiddle.net/IlyaB/y6aryu5m/8/

css animation + png image

request animation frame



                        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();