A small library that generates SVG sub-paths.

For example, in the most simplest of cases:

Given the SVG path data: 
    d="M0,0 L100,100"
    
When asked for the path data that represents 50% of the Path, SubPathProducer would generate the following
    d="M0,0 L50,50"

Almost all existing techniques used to progressively draw an SVG path make use of the stroke-dashoffset or stroke-dasharray path attributes. These methods don't progressively draw the path, but progressively show it. Coupled with the non-conventional use of the dash properties; several limitations become apparent:

• Dashed lines don't behave as if they are being drawn on the screen
• Markers don't follow the tip of the line being drawn and are visible all the time
• Line Caps ends aren't visible when the path is in a partially drawn state
• Stroke and Fill effects that have a dependency on the length of the line arent applied as expected when the path is partially drawn (eg, gradients)

SubPathProducer gets around these problems by drawing sub-paths instead of just hiding a portion of it. SubPathProducer can quickly generate SVG path data that represents the required path at a given percentage, allowing the SVG Path specification to be used as it should be, in it's complete entirety.

SubPathProducer has a weak dependency on jQuery which will be removed upon further development.

To use SubPathProducer simply define the path data of an SVG element in a data-d attribute instead of the regular d.

  <svg>
    <path id="myPath" data-d="M0,0 L100,100" />
  </svg>

Call subPathProducer.set($pathElement, percentage) to instruct SubPathProducer to calculate the path data for a path that represents the data-d path data at the given percentage. The calculated path data string will then be injected into the elements d attribute to be presented on the DOM.

  subPathProducer.set($("#myPath), 0.5);

If we were to inspect the element after calling set(), we would see the following:

  <svg>
    <path id="myPath" data-d="M0,0 L100,100" d="M0,0 L50,50"/>
  </svg>

Notice how the d attribute looks like regular SVG path data, but simply represents half of the data provided in data-d. This flexibility allows us to make use of all of the features of the <path> tag, as outlined in the SVG specification by w3.

subPathProducer.animate($pathElement, startPercentage, endPercentage, duration, easing, callback) calls a tweening function to animate between the provided percentages. Under the hood, animate() calls set()