Loading ...
Sorry, an error occurred while loading the content.

Re: [svg-developers] Screen refreshes during path update?

Expand Messages
  • Peter Thompson
    Here is an example of animated paths using SMIL:http://www.fastsvg.com/uml/uml.html ... From: tgoorden Subject: [svg-developers]
    Message 1 of 3 , Dec 10, 2009
      Here is an example of animated paths using SMIL:http://www.fastsvg.com/uml/uml.html

      --- On Wed, 12/9/09, tgoorden <thomas.goorden@...> wrote:

      From: tgoorden <thomas.goorden@...>
      Subject: [svg-developers] Screen refreshes during path update?
      To: svg-developers@yahoogroups.com
      Date: Wednesday, December 9, 2009, 8:01 PM


      I'm trying to animate a path (simulate a drawing pen) using scripting, but it seems that the canvas won't render until I've finished messing with the path. As a result, you just see the complete line and not the intermediate stages. I'm looking at alternative strategies (SMIL doesn't seem to support this sort of goal) or a way to force a render inside of the drawNextSegment( ) function.

      (Yes, the code is ugly as hell, but right now I just want to see something that works...)

      Code being used:

      <script type="text/ecmascri pt">


      xmlns="http://www.w3 org/2000/ svg"

      var i=1;

      var segments = ["M0,26c34-4, 68-4,101, 6",

      "c7,3,18,2,22, 11",


      "c0,2,0,5-4, 6"];

      var drawPathData = segments[0];

      var drawline;

      function startup(evt) {

      var q=evt.target. ownerDocument;

      var layer1=q.getElement ById("layer1" );

      drawline=q.createEl ementNS(xmlns, "path");

      layer1.appendChild( drawline) ;

      drawline.setAttribu te("fill" ,"none");

      drawline.setAttribu te("stroke" ,"#CCBB42" );

      drawline.setAttribu te("stroke- width","1" );

      for (c=1;c < segments.length; c++) {

      window.setTimeout( "drawNextSegment ()",1000) ;



      function drawNextSegment( ) {

      // alert("Drawing " + i + " : " + segments[i]) ;

      drawPathData = drawPathData + segments[i];

      drawline.setAttribu te("d",drawPathD ata);

      drawline.setAttribu te("stroke" ,"#CCBB42" );





      <g id="layer1">


      [Non-text portions of this message have been removed]
    Your message has been successfully submitted and would be delivered to recipients shortly.