## SVG Draw

The component that animates the stroke of any SVGElement and updates the style attribute of the target.

### Overview

Animate the stroke for most SVGElement shapes, with a very easy to use coordinates system.

The KUTE.js SVG Draw component enables animation for the stroke-dasharray and stroke-dashoffset properties via CSS style.

The component uses the SVG standard .getTotalLength() method for <path> shapes, while for the other shapes it uses some helper methods to calculate the values required for animation.

It can work with <path>, <glyph>, <circle>, <ellipse>, <rect>, <line>, <polyline> and <polygon> shapes. It uses a very simple to use coordinates system so you can set up animations right away.

As you will see in the examples below, there is alot of flexibility in terms of input values.

### Examples

    // draw the stroke from 0-10% to 90-100%
    var tween1 = KUTE.fromTo('selector1',{draw:'0% 10%'}, {draw:'90% 100%'});

    // draw the stroke from zero to full path length
    var tween2 = KUTE.fromTo('selector1',{draw:'0% 0%'}, {draw:'0% 100%'});

    // draw the stroke from full length to 50%
    var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});

Based on the above sample code, let's see some animation going on:

Start

### Notes

- Remember that the `draw` property also accepts absolute values, eg. `draw: '0 150'`; the `.to()` method takes `0% 100%` as start value for your tweens when `stroke-dasharray` and `stroke-dashoffset` properties are not set.
- Sometimes the `stroke` on some shapes may not completely close, you might want to consider values outside the [0-100] percent range.
- The SVG Draw component can be combined with any other SVG based component to create even more complex animations for SVG elements.
- This component is bundled with the default distribution kute.js and the demo/src/kute-extra.js file.