CODEWITHSUNDEEP
jqueryhtmlsvgraphael
Cam
Cam

Reputation: 970

How to draw paths using SVG?

I'm wanting to animate the cursive text below, from left to right.enter image description here

An example of want i'm trying to acheive can be found on the slaveryfootprint.org site. Select an electronic item in the link below, and watch the cables animate; http://slaveryfootprint.org/survey/#gadgets

I'm unfamiliar with SVG and SVG libraries like Raphaël js, so i'm not sure where to start. I've googled around, but not found a tutorial.

EDIT: Find the first tag below, saved from illustrator, depicting the d first character:

<g>
<path fill="none" stroke="#8C3939" stroke-linecap="round" d="M216.615,297.73c9.509,10.697,24.563-12.282,18.444-15.658
    c-6.074-3.351-10.125,5.753-10.125,5.753s-4.297,8.542,2.08,13.137c8.42,6.673,15.817-3.188,15.947-3.43"/>
</g>

Upvotes: 3

Views: 2666

Answers (3)

Kevin Nielsen
Kevin Nielsen

Reputation: 4433

If you have the path, you can do almost anything. Another alternative would be to hand the path to an incremental path expander in javascript. Here's the code I typically use (I've posted it as part of other answers and it's not entirely unique, but this incarnation is mine):

function drawpath( canvas, pathstr, duration, attr, callback )
{
    var guide_path;
    if ( typeof( pathstr ) == "string" )
        guide_path = canvas.path( pathstr ).attr( { stroke: "none", fill: "none" } );
    else
        guide_path = pathstr;
    var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr );
    var total_length = guide_path.getTotalLength( guide_path );
    var last_point = guide_path.getPointAtLength( 0 );
    var start_time = new Date().getTime();
    var interval_length = 50;
    var result = path;        

    var interval_id = setInterval( function()
    {
        var elapsed_time = new Date().getTime() - start_time;
        var this_length = elapsed_time / duration * total_length;
        var subpathstr = guide_path.getSubpath( 0, this_length );            
        attr.path = subpathstr;

        path.animate( attr, interval_length );
        if ( elapsed_time >= duration )
        {
             clearInterval( interval_id );
             if ( callback != undefined ) callback();
             guide_path.remove();
        }                                       
    }, interval_length );  
    return result;
}

You'd then feed in the path for your text to this function. Ideally, I'd do it one letter at a time -- complicated paths seem to get bogged down in Firefox, though Chrome seems to deal with them just fine.

Here's a mock-up on my site.

Upvotes: 4

waraker
waraker

Reputation: 1381

A good starting point: How to work with Scalable Vector Graphics (SVG) in HTML 5

Upvotes: 0

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60966

If you make the cursive text as one stroke you can easily animate it with a stroke-dashoffset + stroke-dasharray attribute. An example of this technique can be seen here.

The solution is to set a dasharray for the path, with one dash that is the same length as the path, and one dash-gap which is also the same length as the path (this length is easily found at runtime by calling the getTotalLength() method on the path element). Then you can push the dash around by animating the stroke-dashoffset attribute.

The technique should be possible to apply with raphaël and other svg frameworks too. Note that the example shows svg animation with the values predetermined.

Upvotes: 3

Related Questions