From c6245cb435f2f4290350adc7120510521c7c9a98 Mon Sep 17 00:00:00 2001 From: Dmitry Baranovskiy Date: Mon, 14 Oct 2013 22:59:34 +1100 Subject: [PATCH] Fix for bug #23 and generate docs with new pull request. Removed VERIFY sections --- dist/reference.html | 947 +++++++++++++++++++++---------------------- dist/snap.svg-min.js | 2 +- dist/snap.svg.js | 755 ++++++++++++++++++---------------- src/path.js | 33 +- src/svg.js | 26 +- 5 files changed, 895 insertions(+), 868 deletions(-) diff --git a/dist/reference.html b/dist/reference.html index 2d253ab..b9657e8 100644 --- a/dist/reference.html +++ b/dist/reference.html @@ -31,26 +31,26 @@

Element.after(el)

-

Inserts given element after the current one. +

Element.after(el)

+

Inserts given element after the current one

Parameters

  1. el Element element to insert
-

Returns: Element parent

-

Element.animate(attrs, ms, [easing], [callback])

-

Animate given attributes of the element. +

Returns: Element the parent element

+

Element.animate(attrs, duration, [easing], [callback])

+

Animates the given attributes of the element

Parameters

  1. attrs object key-value pairs of destination attributes
  2. -
  3. ms +
  4. duration number -duration
  5. +duration of the animation in milliseconds
  6. easing optional function @@ -58,19 +58,19 @@
  7. callback optional function - 
  8. +callback function that executes when the animation ends
-

Returns: Element the element

-

Element.append(el)

-

Appends given element to current one. +

Returns: Element the current element

+

Element.append(el)

+

Appends the given element to current one

Parameters

  1. el Element Set element to append
-

Returns: Element parent

-

Element.asPX(attr, [value])

-

Return given attribute of the element as a px value. (Not %, em, etc) +

Returns: Element the parent element

+

Element.asPX(attr, [value])

+

Returns given attribute of the element as a px value (not %, em, etc.)

Parameters

  1. attr string @@ -81,12 +81,12 @@ attribute value

Returns: Element result of query selection

-

Element.attr(…)

Gets or sets given attributes of the element

Parameters

  1. params object -key-value pairs of attributes you want to set
  2. +contains key-value pairs of attributes you want to set

or

@@ -94,7 +94,7 @@ string name of the attribute
-

Returns: Element

+

Returns: Element the current element

or

Returns: string value of attribute

@@ -104,30 +104,30 @@ strokeWidth: 2, // CamelCase... "fill-opacity": 0.5 // or dash-separated names }); -console.log(el.attr("fill")); // “#fc0” +console.log(el.attr("fill")); // #fc0
-

Element.before(el)

-

Inserts given element before the current one. +

Element.before(el)

+

Inserts given element before the current one

Parameters

  1. el Element element to insert
-

Returns: Element parent

+

Returns: Element the parent element

Element.click(handler)

-

Adds event handler for click for the element. +

Adds a click event handler to the element

Parameters

  1. handler function handler for the event

Returns: object Element

-

Element.clone()

-

Creates clone of the element and inserts it after the element. +

Element.clone()

+

Creates a clone of the element and inserts it after the element

Returns: Element the clone

-

Element.data(key, [value])

-

Adds or retrieves given value asociated with given key. +

Element.data(key, [value])

+

Adds or retrieves given value associated with given key See also Element.removeData

Parameters

  1. key @@ -152,15 +152,15 @@ See also Element.removeData }

Element.dblclick(handler)

-

Adds event handler for double click for the element. +

Adds a double click event handler to the element

Parameters

  1. handler function handler for the event

Returns: object Element

-

Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext])

-

Adds event handlers for drag of the element. +

Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext])

+

Adds event handlers for an element's drag gesture

Parameters

  1. onmove function @@ -184,17 +184,17 @@ See also Element.removeData object context for drag end handler
-

Additionaly following drag events will be triggered: drag.start.<id> on start, -drag.end.<id> on end and drag.move.<id> on every move. When element will be dragged over another element -drag.over.<id> will be fired as well. +

Additionaly following drag events are triggered: drag.start.<id> on start, +drag.end.<id> on end and drag.move.<id> on every move. When element is dragged over another element +drag.over.<id> fires as well.

-

Start event and start handler will be called in specified context or in context of the element with following parameters: +

Start event and start handler are called in specified context or in context of the element with following parameters:

  1. xnumberx position of the mouse
  2. ynumbery position of the mouse
  3. eventobjectDOM event object
-

Move event and move handler will be called in specified context or in context of the element with following parameters: +

Move event and move handler are called in specified context or in context of the element with following parameters:

  1. dxnumbershift by x from the start point
  2. dynumbershift by y from the start point @@ -202,12 +202,12 @@ See also Element.removeData
  3. ynumbery position of the mouse
  4. eventobjectDOM event object
-

End event and end handler will be called in specified context or in context of the element with following parameters: +

End event and end handler are called in specified context or in context of the element with following parameters:

  1. eventobjectDOM event object

Returns: object Element

-

Adds event handlers for drag of the element. +

Adds event handlers for an element's drag gesture

Parameters

  1. onmove function @@ -231,17 +231,17 @@ See also Element.removeData object context for drag end handler
-

Additionaly following drag events will be triggered: drag.start.<id> on start, -drag.end.<id> on end and drag.move.<id> on every move. When element will be dragged over another element -drag.over.<id> will be fired as well. +

Additionaly following drag events are triggered: drag.start.<id> on start, +drag.end.<id> on end and drag.move.<id> on every move. When element is dragged over another element +drag.over.<id> fires as well.

-

Start event and start handler will be called in specified context or in context of the element with following parameters: +

Start event and start handler are called in specified context or in context of the element with following parameters:

  1. xnumberx position of the mouse
  2. ynumbery position of the mouse
  3. eventobjectDOM event object
-

Move event and move handler will be called in specified context or in context of the element with following parameters: +

Move event and move handler are called in specified context or in context of the element with following parameters:

  1. dxnumbershift by x from the start point
  2. dynumbershift by y from the start point @@ -249,13 +249,13 @@ See also Element.removeData
  3. ynumbery position of the mouse
  4. eventobjectDOM event object
-

End event and end handler will be called in specified context or in context of the element with following parameters: +

End event and end handler are called in specified context or in context of the element with following parameters:

  1. eventobjectDOM event object

Returns: object Element

-

Element.getBBox()

-

Returns bounding box descriptor for the given element. +

Element.getBBox()

+

Returns the bounding box descriptor for the given element

Returns: object bounding box descriptor:

  1. {
    1. cx:numberx of the center, @@ -263,46 +263,46 @@ See also Element.removeData
    2. h:numberheight,
    3. height:numberheight,
    4. path:stringpath command for the box, -
    5. r0:numberradius of the circle that will enclose the box, +
    6. r0:numberradius of a circle that fully encloses the box,
    7. r1:numberradius of the smallest circle that can be enclosed, -
    8. r2:numberradius of the biggest circle that can be enclosed, +
    9. r2:numberradius of the largest circle that can be enclosed,
    10. vb:stringbox as a viewbox command,
    11. w:numberwidth,
    12. width:numberwidth,
    13. x2:numberx of the right side,
    14. x:numberx of the left side, -
    15. y2:numbery of the right side, -
    16. y:numbery of the left side +
    17. y2:numbery of the bottom edge, +
    18. y:numbery of the top edge
  2. }
-

Element.getPointAtLength(length)

-

Return coordinates of the point located at the given length on the given path. Only works for element of “path” type. +

Element.getPointAtLength(length)

+

Returns coordinates of the point located at the given length on the given path (only works for path elements)

Parameters

  1. length number - 
  2. +length, in pixels, from the start of the path, excluding non-rendering jumps

Returns: object representation of the point:

-
  1. {
    1. x:numberx coordinate -
    2. y:numbery coordinate +
      1. {
        1. x:numberx coordinate, +
        2. y:numbery coordinate,
        3. alpha:numberangle of derivative
      2. }
      -

Element.getSubpath(from, to)

-

Return subpath of a given element from given length to given length. Only works for element of “path” type. +

Element.getSubpath(from, to)

+

Returns subpath of a given element from given start and end lengths (only works for path elements)

Parameters

  1. from number -position of the start of the segment
  2. +length, in pixels, from the start of the path to the start of the segment
  3. to number -position of the end of the segment
  4. +length, in pixels, from the start of the path to the end of the segment
-

Returns: string pathstring for the segment

+

Returns: string path string definition for the segment

Element.getTotalLength()

-

Returns length of the path in pixels. Only works for element of “path” type. +

Returns the length of the path in pixels (only works for path elements)

-

Returns: number length.

+

Returns: number length

Element.hover(f_in, f_out, [icontext], [ocontext])

-

Adds event handlers for hover for the element. +

Adds hover event handlers to the element

Parameters

  1. f_in function @@ -320,37 +320,37 @@ See also Element.removeData context for hover out handler

Returns: object Element

-

Element.inAnim()

-

Returns an array of animations element currently in +

Element.inAnim()

+

Returns a set of animations that may be able to manipulate the current element

-

Returns: object in format

+

Returns: object in format:

  1. {
    1. animobjectanimation object,
    2. curStatusnumber0..1 — status of the animation: 0 — just started, 1 — just finished,
    3. statusfunctiongets or sets the status of the animation,
    4. stopfunctionstops the animation
  2. }
-

Element.innerSVG()

-

Returns SVG code of the element. Equivalent to innerHTML in HTML context. +

Element.innerSVG()

+

Returns SVG code for the element's contents, equivalent to HTML's innerHTML

-

Returns: string SVG code of the element.

-

Element.insertAfter(el)

-

Inserts the element after the given one. +

Returns: string SVG code for the element

+

Element.insertAfter(el)

+

Inserts the element after the given one

Parameters

  1. el Element element next to whom insert to
-

Returns: Element parent

-

Element.insertBefore(el)

-

Inserts the element after the given one. +

Returns: Element the parent element

+

Element.insertBefore(el)

+

Inserts the element after the given one

Parameters

  1. el Element element next to whom insert to
-

Returns: Element parent

-

Element.marker(x, y, width, height, refX, refY)

-

Creates <marker> element from the current element. +

Returns: Element the parent element

+

Element.marker(x, y, width, height, refX, refY)

+

Creates a <marker> element from the current element To create a marker you have to specify the bounding rect and reference point:

Parameters

  1. x @@ -372,11 +372,11 @@ To create a marker you have to specify the bounding rect and reference point: number  
-

Returns: Element <marker> element

-

You can use pattern later on as an argument for marker-start or marker-end attributes. +

Returns: Element the <marker> element

+

You can specify the marker later as an argument for marker-start, marker-end, marker-mid, and marker attributes. The marker attribute places the marker at every point along the path, and marker-mid places them at every point except the start and end.

Element.mousedown(handler)

-

Adds event handler for mousedown for the element. +

Adds a mousedown event handler to the element

Parameters

  1. handler function @@ -384,7 +384,7 @@ To create a marker you have to specify the bounding rect and reference point:

Returns: object Element

Element.mousemove(handler)

-

Adds event handler for mousemove for the element. +

Adds a mousemove event handler to the element

Parameters

  1. handler function @@ -392,7 +392,7 @@ To create a marker you have to specify the bounding rect and reference point:

Returns: object Element

Element.mouseout(handler)

-

Adds event handler for mouseout for the element. +

Adds a mouseout event handler to the element

Parameters

  1. handler function @@ -400,7 +400,7 @@ To create a marker you have to specify the bounding rect and reference point:

Returns: object Element

Element.mouseover(handler)

-

Adds event handler for mouseover for the element. +

Adds a mouseover event handler to the element

Parameters

  1. handler function @@ -408,19 +408,19 @@ To create a marker you have to specify the bounding rect and reference point:

Returns: object Element

Element.mouseup(handler)

-

Adds event handler for mouseup for the element. +

Adds a mouseup event handler to the element

Parameters

  1. handler function handler for the event

Returns: object Element

-

Element.parent()

-

Returns parent of the element +

Element.parent()

+

Returns the element's parent

-

Returns: Element parent

-

Element.pattern(x, y, width, height)

-

Creates <pattern> element from the current element. +

Returns: Element the parent element

+

Element.pattern(x, y, width, height)

+

Creates a <pattern> element from the current element To create a pattern you have to specify the pattern rect:

Parameters

  1. x @@ -436,7 +436,7 @@ To create a pattern you have to specify the pattern rect: string number  
-

Returns: Element <pattern> element

+

Returns: Element the <pattern> element

You can use pattern later on as an argument for fill attribute:

var p = paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
@@ -449,19 +449,19 @@ c.attr({
     fill: p
 });
 
-

Element.prepend(el)

-

Prepends given element to current one. +

Element.prepend(el)

+

Prepends the given element to the current one

Parameters

  1. el Element element to prepend
-

Returns: Element parent

-

Element.remove()

+

Returns: Element the parent element

+

Element.remove()

Removes element from the DOM

-

Returns: Element removed element

-

Element.removeData([key])

+

Returns: Element the detached element

+

Element.removeData([key])

Removes value associated with an element by given key. If key is not provided, removes all the data of the element.

@@ -471,39 +471,39 @@ If key is not provided, removes all the data of the element. key

Returns: object Element

-

Element.select(query)

-

Applies CSS selector with the element as a parent and returns the result as an Element. +

Element.select(query)

+

Gathers the nested Element matching the given set of CSS selectors

Parameters

  1. query string CSS selector

Returns: Element result of query selection

-

Element.selectAll(query)

-

Applies CSS selector with the element as a parent and returns the result as a set or array of elements. +

Element.selectAll(query)

+

Gathers nested Element objects matching the given set of CSS selectors

Parameters

  1. query string CSS selector

Returns: Set array result of query selection

-

Element.stop()

-

Stops all the animations of the current element. +

Element.stop()

+

Stops all the animations for the current element

-

Returns: Element the element

-

Element.toDefs()

-

Moves element to the relative <defs> section. +

Returns: Element the current element

+

Element.toDefs()

+

Moves element to the shared <defs> area

Returns: Element the clone

-

Element.toString()

-

Returns SVG code of the element. Equivalent to outerHTML in HTML context. +

Element.toString()

+

Returns SVG code for the element, equivalent to HTML's outerHTML

-

Returns: string SVG code of the element.

-

Returns SVG code of the Paper. +

Returns: string SVG code for the element

+

Returns SVG code for the Paper

-

Returns: string SVG code of the Paper.

+

Returns: string SVG code for the Paper

Element.touchcancel(handler)

-

Adds event handler for touchcancel for the element. +

Adds a touchcancel event handler to the element

Parameters

  1. handler function @@ -511,7 +511,7 @@ If key is not provided, removes all the data of the element.

Returns: object Element

Element.touchend(handler)

-

Adds event handler for touchend for the element. +

Adds a touchend event handler to the element

Parameters

  1. handler function @@ -519,7 +519,7 @@ If key is not provided, removes all the data of the element.

Returns: object Element

Element.touchmove(handler)

-

Adds event handler for touchmove for the element. +

Adds a touchmove event handler to the element

Parameters

  1. handler function @@ -527,21 +527,21 @@ If key is not provided, removes all the data of the element.

Returns: object Element

Element.touchstart(handler)

-

Adds event handler for touchstart for the element. +

Adds a touchstart event handler to the element

Parameters

  1. handler function handler for the event

Returns: object Element

-

Element.transform(tstr)

+

Element.transform(tstr)

Gets or sets transformation of the element

Parameters

  1. tstr string transform string in Snap or SVG format
-

Returns: Element

+

Returns: Element the current element

or

Returns: object transformation descriptor:

@@ -554,7 +554,7 @@ If key is not provided, removes all the data of the element.
  • toStringfunctionreturns string property
  • }
  • Element.unclick(handler)

    -

    Removes event handler for click for the element. +

    Removes a click event handler from the element

    Parameters

    1. handler function @@ -562,18 +562,18 @@ If key is not provided, removes all the data of the element.

    Returns: object Element

    Element.undblclick(handler)

    -

    Removes event handler for double click for the element. +

    Removes a double click event handler from the element

    Parameters

    1. handler function handler for the event

    Returns: object Element

    -

    Element.undrag()

    -

    Removes all drag event handlers from given element. +

    Element.undrag()

    +

    Removes all drag event handlers from the given element

    Element.unhover(f_in, f_out)

    -

    Removes event handlers for hover for the element. +

    Removes hover event handlers from the element

    Parameters

    1. f_in function @@ -584,7 +584,7 @@ If key is not provided, removes all the data of the element.

    Returns: object Element

    Element.unmousedown(handler)

    -

    Removes event handler for mousedown for the element. +

    Removes a mousedown event handler from the element

    Parameters

    1. handler function @@ -592,7 +592,7 @@ If key is not provided, removes all the data of the element.

    Returns: object Element

    Element.unmousemove(handler)

    -

    Removes event handler for mousemove for the element. +

    Removes a mousemove event handler from the element

    Parameters

    1. handler function @@ -600,7 +600,7 @@ If key is not provided, removes all the data of the element.

    Returns: object Element

    Element.unmouseout(handler)

    -

    Removes event handler for mouseout for the element. +

    Removes a mouseout event handler from the element

    Parameters

    1. handler function @@ -608,7 +608,7 @@ If key is not provided, removes all the data of the element.

    Returns: object Element

    Element.unmouseover(handler)

    -

    Removes event handler for mouseover for the element. +

    Removes a mouseover event handler from the element

    Parameters

    1. handler function @@ -616,7 +616,7 @@ If key is not provided, removes all the data of the element.

    Returns: object Element

    Element.unmouseup(handler)

    -

    Removes event handler for mouseup for the element. +

    Removes a mouseup event handler from the element

    Parameters

    1. handler function @@ -624,7 +624,7 @@ If key is not provided, removes all the data of the element.

    Returns: object Element

    Element.untouchcancel(handler)

    -

    Removes event handler for touchcancel for the element. +

    Removes a touchcancel event handler from the element

    Parameters

    1. handler function @@ -632,7 +632,7 @@ If key is not provided, removes all the data of the element.

    Returns: object Element

    Element.untouchend(handler)

    -

    Removes event handler for touchend for the element. +

    Removes a touchend event handler from the element

    Parameters

    1. handler function @@ -640,7 +640,7 @@ If key is not provided, removes all the data of the element.

    Returns: object Element

    Element.untouchmove(handler)

    -

    Removes event handler for touchmove for the element. +

    Removes a touchmove event handler from the element

    Parameters

    1. handler function @@ -648,27 +648,27 @@ If key is not provided, removes all the data of the element.

    Returns: object Element

    Element.untouchstart(handler)

    -

    Removes event handler for touchstart for the element. +

    Removes a touchstart event handler from the element

    Parameters

    1. handler function handler for the event

    Returns: object Element

    -

    Element.use()

    -

    Creates <use> element linked to the current element. +

    Element.use()

    +

    Creates a <use> element linked to the current element

    -

    Returns: Element <use> element

    +

    Returns: Element the <use> element

    Fragment

    -

    Fragment.select()

    +

    Fragment.select()

    Fragment.selectAll()

    +

    Fragment.selectAll()

    Matrix

    -

    Matrix.add(…)

    -

    Adds given matrix to existing one. +

    Matrix.add(…)

    +

    Adds the given matrix to existing one

    Parameters

    1. a number @@ -695,47 +695,47 @@ If key is not provided, removes all the data of the element. object Matrix
    -

    Matrix.clone()

    -

    Returns copy of the matrix +

    Matrix.clone()

    +

    Returns a copy of the matrix

    Returns: object Matrix

    -

    Matrix.invert()

    -

    Returns inverted version of the matrix +

    Matrix.invert()

    +

    Returns an inverted version of the matrix

    Returns: object Matrix

    -

    Matrix.rotate(a, x, y)

    +

    Matrix.rotate(a, x, y)

    Rotates the matrix

    Parameters

    1. a number - 
    2. +angle of rotation, in degrees
    3. x number - 
    4. +horizontal origin point from which to rotate
    5. y number - 
    6. +vertical origin point from which to rotate
    -

    Matrix.scale(x, [y], [cx], [cy])

    +

    Matrix.scale(x, [y], [cx], [cy])

    Scales the matrix

    Parameters

    1. x number - 
    2. +amount to be scaled, with 1 resulting in no change
    3. y optional number - 
    4. +amount to scale along the vertical axis. (Otherwise x applies to both axes.)
    5. cx optional number - 
    6. +horizontal origin point from which to scale
    7. cy optional number - 
    8. +vertical origin point from which to scale
    -

    Matrix.split()

    +

    Matrix.split()

    Splits matrix into primitive transformations

    Returns: object in format:

    @@ -747,22 +747,22 @@ If key is not provided, removes all the data of the element.
  • rotatenumberrotation in deg
  • isSimplebooleancould it be represented via simple transformations -
  • Matrix.toTransformString()

    -

    Return transform string that represents given matrix +

    Matrix.toTransformString()

    +

    Returns transform string that represents given matrix

    Returns: string transform string

    -

    Matrix.translate(x, y)

    +

    Matrix.translate(x, y)

    Translate the matrix

    Parameters

    1. x number - 
    2. +horizontal offset distance
    3. y number - 
    4. +vertical offset distance
    -

    Matrix.x(x, y)

    -

    Return x coordinate for given point after transformation described by the matrix. See also Matrix.y +

    Matrix.x(x, y)

    +

    Returns x coordinate for given point after transformation described by the matrix. See also Matrix.y

    Parameters

    1. x number @@ -772,8 +772,8 @@ If key is not provided, removes all the data of the element.  

    Returns: number x

    -

    Matrix.y(x, y)

    -

    Return y coordinate for given point after transformation described by the matrix. See also Matrix.x +

    Matrix.y(x, y)

    +

    Returns y coordinate for given point after transformation described by the matrix. See also Matrix.x

    Parameters

    1. x number @@ -784,8 +784,8 @@ If key is not provided, removes all the data of the element.

    Returns: number y

    Paper

    -

    Paper.circle(x, y, r)

    -

    Draws a circle. +

    Paper.circle(x, y, r)

    +

    Draws a circle

    Parameters

    1. x number @@ -797,11 +797,11 @@ If key is not provided, removes all the data of the element. number radius
    -

    Returns: object Element object with type “circle”

    +

    Returns: object the circle element

    Usage

    var c = paper.circle(50, 50, 40);
     
    -

    Paper.el(name, attr)

    -

    Creates element on paper with a given name and no attributes. +

    Paper.el(name, attr)

    +

    Creates an element on paper with a given name and no attributes

    Parameters

    1. name string @@ -810,7 +810,7 @@ If key is not provided, removes all the data of the element. object attributes
    -

    Returns: Element the element

    +

    Returns: Element the current element

    Usage

    var c = paper.circle(10, 10, 10); // is the same as...
     var c = paper.el("circle").attr({
         cx: 10,
    @@ -818,8 +818,8 @@ var c = paper.el("circle").attr({
         r: 10
     });
     
    -

    Paper.ellipse(x, y, rx, ry)

    -

    Draws an ellipse. +

    Paper.ellipse(x, y, rx, ry)

    +

    Draws an ellipse

    Parameters

    1. x number @@ -834,36 +834,36 @@ var c = paper.el("circle").attr({ number vertical radius
    -

    Returns: object Element object with type “ellipse”

    +

    Returns: object the ellipse element

    Usage

    var c = paper.ellipse(50, 50, 40, 20);
     
    -

    Paper.filter(filstr)

    -

    Creates filter element +

    Paper.filter(filstr)

    +

    Creates a <filter> element

    Parameters

    1. filstr string -SVG fragment of filter provided as a string.
    2. +SVG fragment of filter provided as a string

    Returns: object Element

    -

    Note: It is recommended to use filters embedded into page inside empty SVG element. +

    Note: It is recommended to use filters embedded into the page inside an empty SVG element.

    Usage

    var f = paper.filter('<feGaussianBlur stdDeviation="2"/>'),
         c = paper.circle(10, 10, 10).attr({
             filter: f
         });
     
    -

    Paper.g([varargs])

    -

    Makes a group element. +

    Paper.g([varargs])

    +

    Creates a group element

    Parameters

    1. varargs optional -elements
    2. +elements to nest within the group
    -

    Returns: object Element object with type “g”

    +

    Returns: object the g element

    Usage

    var c1 = paper.circle(),
         c2 = paper.rect(),
    -    g = paper.g(c2, c1); // note that the order of elements will be different
    +    g = paper.g(c2, c1); // note that the order of elements is different
     

    or

    @@ -872,59 +872,64 @@ var c = paper.el("circle").attr({ g = paper.g(); g.add(c2, c1);
    -

    Paper.gradient(gradient)

    -

    Creates a gradient element. +

    Paper.gradient(gradient)

    +

    Creates a gradient element

    Parameters

    1. gradient string gradient descriptor
    -

    Gradient Descriptor

    Gradient descriptor consists of <type>(<coords>)<colors>. Type -could be linear or radial, which presented as letter “L” or “R”. Any -type could be absolute or relative, absolute gradient take it coords -relative to the SVG surface, while relative takes them relative to -the bounding box of the element it applied to. For absolute -coordinates you specify type as an upper case letter (“L” or “R”). -For relative use low case letter (“l” or “r”). Coordinates specify -vector of gradient for linear as x1, y1, x2, y2. For radial as cx, -cy, r and optional fx, fy. Colors are list of dash separated colors. -Optionally color could have offset after colon. +

    Gradient Descriptor

    The gradient descriptor is an expression formatted as +follows: <type>(<coords>)<colors>. The <type> can be +either linear or radial. The uppercase L or R letters +indicate absolute coordinates offset from the SVG surface. +Lowercase l or r letters indicate coordinates +calculated relative to the element to which the gradient is +applied. Coordinates specify a linear gradient vector as +x1, y1, x2, y2, or a radial gradient as cx, cy, +r and optional fx, fy specifying a focal point away +from the center of the circle. Specify <colors> as a list +of dash-separated CSS color values. Each color may be +followed by a custom offset value, separated with a colon +character.

    -

    Example

    var g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff");
    +

    Examples

    Linear gradient, relative from top-left corner to bottom-right +corner, from black through red to white: +

    +
    var g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff");
     
    -

    Linear gradient, relative from top-left corner to bottom-right -corner, from black through red to white. +

    Linear gradient, absolute from (0, 0) to (100, 100), from black +through red at 25% to white:

    var g = paper.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff");
     
    -

    Linear gradient, absolute from (0, 0) to (100, 100), from black -through red at 25% to white. +

    Radial gradient, relative from the center of the element with radius +half the width, from black to white:

    var g = paper.gradient("r(0.5, 0.5, 0.5)#000-#fff");
     
    -

    Radial gradient, relative from the center of the element with radius -0.5 of the width, from black to white. +

    To apply the gradient:

    paper.circle(50, 50, 40).attr({
         fill: g
     });
     
    -

    Returns: object Element object with type “gradient”

    -

    Paper.group()

    +

    Returns: object the gradient element

    +

    Paper.group()

    See Paper.g

    -

    Paper.image(src, x, y, width, height)

    -

    Embeds an image into the surface. +

    Paper.image(src, x, y, width, height)

    +

    Places an image on the surface

    Parameters

    1. src string URI of the source image
    2. x number -x coordinate position
    3. +x offset position
    4. y number -y coordinate position
    5. +y offset position
    6. width number width of the image
    7. @@ -932,32 +937,14 @@ through red at 25% to white. number height of the image
    -

    Returns: object Raphaël element object with type “image”

    -

    Usage

    var c = paper.image("apple.png", 10, 10, 80, 80);
    -
    -

    Embeds an image into the surface. +

    Returns: object the image element

    +

    or

    -

    Parameters

    1. src -string -URI of the source image
    2. -
    3. x -number -x coordinate position
    4. -
    5. y -number -y coordinate position
    6. -
    7. width -number -width of the image
    8. -
    9. height -number -height of the image
    10. -
    -

    Returns: object Element object with type “image”

    +

    Returns: object Raphaël element object with type image

    Usage

    var c = paper.image("apple.png", 10, 10, 80, 80);
     
    -

    Paper.line(x1, y1, x2, y2)

    -

    Draws a line. +

    Paper.line(x1, y1, x2, y2)

    +

    Draws a line

    Parameters

    1. x1 number @@ -972,22 +959,22 @@ through red at 25% to white. number y coordinate position of the end
    -

    Returns: object Element object with type “line”

    +

    Returns: object the line element

    Usage

    var t1 = paper.line(50, 50, 100, 100);
     
    -

    Paper.path([pathString])

    -

    Creates a path element by given path data string. +

    Paper.path([pathString])

    +

    Creates a <path> element using the given string as the path's definition

    Parameters

    1. pathString optional string -path string in SVG format.
    2. +path string in SVG format
    -

    Path string consists of one-letter commands, followed by comma seprarated arguments in numercal form. Example: +

    Path string consists of one-letter commands, followed by comma seprarated arguments in numerical form. Example:

    "M10,20L30,40"
     
    -

    Here we can see two commands: “M”, with arguments (10, 20) and “L” with arguments (30, 40). Upper case letter mean command is absolute, lower case—relative. +

    This example features two commands: M, with arguments (10, 20) and L with arguments (30, 40). Uppercase letter commands express coordinates in absolute terms, while lowercase commands express them in relative terms from the most recently declared coordinates.

    Here is short list of commands available, for more details see SVG path string format or article about path strings at MDN.

    @@ -1003,18 +990,18 @@ through red at 25% to white. Tsmooth quadratic Bézier curveto(x y)+ Aelliptical arc(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ RCatmull-Rom curveto*x1 y1 (x y)+ -

  • “Catmull-Rom curveto” is a not standard SVG command and added to make life easier.
  • -Note: there is a special case when path consist of just three commands: “M10,10R…z”. In this case path will smoothly connects to its beginning. +

  • Catmull-Rom curveto is a not standard SVG command and added to make life easier.
  • +Note: there is a special case when a path consists of only three commands: M10,10R…z. In this case the path connects back to its starting point.

    Usage

    var c = paper.path("M10 10L90 90");
     // draw a diagonal line:
     // move to 10,10, line to 90,90
     
    -

    Paper.polygon()

    +

    Paper.polygon()

    Draws a polygon. See Paper.polyline

    -

    Paper.polyline(…)

    -

    Draws a polyline. +

    Paper.polyline(…)

    +

    Draws a polyline

    Parameters

    1. points array @@ -1026,13 +1013,13 @@ Note: there is a special case when path consist of just three commands: “M10,1 points
    -

    Returns: object Element object with type “text”

    +

    Returns: object the polyline element

    Usage

    var p1 = paper.polyline([10, 10, 100, 100]);
     var p2 = paper.polyline(10, 10, 100, 100);
     
    -

    Paper.rect(x, y, width, height, [rx], [ry])

    +

    Paper.rect(x, y, width, height, [rx], [ry])

    -

    Draws a rectangle. +

    Draws a rectangle

    Parameters

    1. x number @@ -1049,20 +1036,20 @@ var p2 = paper.polyline(10, 10, 100, 100);
    2. rx optional number -horisontal radius for rounded corners, default is 0
    3. +horizontal radius for rounded corners, default is 0
    4. ry optional number vertical radius for rounded corners, default is rx or 0
    -

    Returns: object Element object with type “rect”

    +

    Returns: object the rect element

    Usage

    // regular rectangle
     var c = paper.rect(10, 10, 50, 50);
     // rectangle with rounded corners
     var c = paper.rect(40, 40, 50, 50, 10);
     
    -

    Paper.text(x, y, text)

    -

    Draws a text string. +

    Paper.text(x, y, text)

    +

    Draws a text string

    Parameters

    1. x number @@ -1072,22 +1059,22 @@ var c = paper.rect(40, 40, 50, 50, 10); y coordinate position
    2. text string array -The text string to draw or array of <tspan>s
    3. +The text string to draw or array of strings to nest within separate <tspan> elements
    -

    Returns: object Element object with type “text”

    +

    Returns: object the text element

    Usage

    var t1 = paper.text(50, 50, "Snap");
     var t2 = paper.text(50, 50, ["S","n","a","p"]);
     
    -

    Paper.toString()

    -

    Returns SVG code of the element. Equivalent to outerHTML in HTML context. +

    Paper.toString()

    +

    Returns SVG code for the element, equivalent to HTML's outerHTML

    -

    Returns: string SVG code of the element.

    -

    Returns SVG code of the Paper. +

    Returns: string SVG code for the element

    +

    Returns SVG code for the Paper

    -

    Returns: string SVG code of the Paper.

    +

    Returns: string SVG code for the Paper

    Set

    Set.clear()

    -

    Removeds all elements from the set +

    Removes all elements from the set

    Set.exclude(element)

    Removes given element from the set @@ -1096,11 +1083,11 @@ var t2 = paper.text(50, 50, ["S","n","a","p"]); object element to remove

    -

    Returns: boolean true if object was found & removed from the set

    +

    Returns: boolean true if object was found and removed from the set

    Set.forEach(callback, thisArg)

    -

    Executes given function for each element in the set. +

    Executes given function for each element in the set

    -

    If function returns false it will stop loop running. +

    If the function returns false, the loop stops running.

    Parameters

    1. callback function @@ -1111,15 +1098,15 @@ var t2 = paper.text(50, 50, ["S","n","a","p"]);

    Returns: object Set object

    Set.pop()

    -

    Removes last element and returns it. +

    Removes last element and returns it

    Returns: object element

    Set.push()

    -

    Adds each argument to the current set. +

    Adds each argument to the current set

    Returns: object original element

    Set.splice(index, count, [insertion…])

    -

    Removes given element from the set +

    Removes range of elements from the set

    Parameters

    1. index number @@ -1134,9 +1121,9 @@ var t2 = paper.text(50, 50, ["S","n","a","p"]);

    Returns: object set elements that were deleted

    Snap

    -

    Snap.Matrix(…)

    +

    Snap.Matrix(…)

    Utility method -Returns matrix based on given parameters. +Returns a matrix based on the given parameters

    Parameters

    1. a number @@ -1164,8 +1151,8 @@ Returns matrix based on given parameters.  

    Returns: object Matrix

    -

    Snap.ajax(…)

    -

    Simple implementation of Ajax. +

    Snap.ajax(…)

    +

    Simple implementation of Ajax

    Parameters

    1. url string @@ -1194,9 +1181,9 @@ Returns matrix based on given parameters. object scope of callback
    -

    Returns: XMLHttpRequest XMLHttpRequest (just in case)

    -

    Snap.angle(x1, y1, x2, y2, [x3], [y3])

    -

    Returns angle between two or three points. +

    Returns: XMLHttpRequest the XMLHttpRequest object, just in case

    +

    Snap.angle(x1, y1, x2, y2, [x3], [y3])

    +

    Returns an angle between two or three points

    Parameters

    Parameters

    1. x1 number @@ -1219,9 +1206,9 @@ Returns matrix based on given parameters. number y coord of third point
    -

    Returns: number angle in degrees.

    -

    Snap.animate(from, to, setter, ms, [easing], [callback])

    -

    Runs generic animation of one number into another with a caring function. +

    Returns: number angle in degrees

    +

    Snap.animate(from, to, setter, duration, [easing], [callback])

    +

    Runs generic animation of one number into another with a caring function

    Parameters

    1. from number array @@ -1231,10 +1218,10 @@ Returns matrix based on given parameters. number or array of numbers
    2. setter function -caring function that will take one number argument
    3. -
    4. ms +caring function that accepts one number argument
    5. +
    6. duration number -duration
    7. +duration, in milliseconds
    8. easing optional function @@ -1242,7 +1229,7 @@ Returns matrix based on given parameters.
    9. callback optional function - 
    10. +callback function to execute when animation ends

    Returns: object animation object in mina format

    1. {
      1. idstringanimation id, consider it read-only, @@ -1252,15 +1239,15 @@ Returns matrix based on given parameters.
      2. statusfunctiongets or sets the status of the animation,
      3. stopfunctionstops the animation
    2. }
    -

    Snap.animation(attr, ms, [easing], [callback])

    -

    Creates animation object. +

    Snap.animation(attr, duration, [easing], [callback])

    +

    Creates an animation object

    Parameters

    1. attr object attributes of final destination
    2. -
    3. ms +
    4. duration number -animation duration
    5. +duration of the animation, in milliseconds
    6. easing optional function @@ -1268,46 +1255,46 @@ Returns matrix based on given parameters.
    7. callback optional function -callback
    8. +callback function that fires when animation ends

    Returns: object animation object

    -

    Snap.color(clr)

    -

    Parses the color string and returns object with all values for the given color. +

    Snap.color(clr)

    +

    Parses the color string and returns an object featuring the color's component values

    Parameters

    1. clr string color string in one of the supported formats (see Snap.getRGB)
    -

    Returns: object Combined RGB & HSB object in format:

    +

    Returns: object Combined RGB/HSB object in the following format:

    1. {
      1. rnumberred,
      2. gnumbergreen,
      3. bnumberblue,
      4. hexstringcolor in HTML/CSS format: #••••••, -
      5. errorbooleantrue if string cant be parsed, +
      6. errorbooleantrue if string can't be parsed,
      7. hnumberhue,
      8. snumbersaturation,
      9. vnumbervalue (brightness),
      10. lnumberlightness
    2. }
    -

    Snap.deg(deg)

    +

    Snap.deg(rad)

    Transform angle to degrees

    -

    Parameters

    1. deg +

      Parameters

      1. rad number angle in radians
      -

      Returns: number angle in degrees.

      +

      Returns: number angle in degrees

    Snap.filter

    -

    Snap.filter.blur(x, [y])

    -

    Returns string of the blur filter. +

    Snap.filter.blur(x, [y])

    +

    Returns an SVG markup string for the blur filter

    Parameters

    1. x number -amount of horisontal blur in px.
    2. +amount of horizontal blur, in pixels
    3. y optional number -amount of vertical blur in px.
    4. +amount of vertical blur, in pixels

    Returns: string filter representation

    Usage

    var f = paper.filter(Snap.filter.blur(5, 10)),
    @@ -1315,79 +1302,79 @@ Returns matrix based on given parameters.
             filter: f
         });
     
    -

    Snap.filter.brightness(amount)

    -

    Returns string of the brightness filter. +

    Snap.filter.brightness(amount)

    +

    Returns an SVG markup string for the brightness filter

    Parameters

    1. amount number -amount of filter (0..1).
    2. +amount of filter (0..1)

    Returns: string filter representation

    -

    Snap.filter.contrast(amount)

    -

    Returns string of the contrast filter. +

    Snap.filter.contrast(amount)

    +

    Returns an SVG markup string for the contrast filter

    Parameters

    1. amount number -amount of filter (0..1).
    2. +amount of filter (0..1)

    Returns: string filter representation

    -

    Snap.filter.grayscale(amount)

    -

    Returns string of the grayscale filter. +

    Snap.filter.grayscale(amount)

    +

    Returns an SVG markup string for the grayscale filter

    Parameters

    1. amount number -amount of filter (0..1).
    2. +amount of filter (0..1)

    Returns: string filter representation

    -

    Snap.filter.hueRotate(angle)

    -

    Returns string of the hue-rotate filter. +

    Snap.filter.hueRotate(angle)

    +

    Returns an SVG markup string for the hue-rotate filter

    Parameters

    1. angle number -angle of rotation.
    2. +angle of rotation

    Returns: string filter representation

    -

    Snap.filter.invert(amount)

    -

    Returns string of the invert filter. +

    Snap.filter.invert(amount)

    +

    Returns an SVG markup string for the invert filter

    Parameters

    1. amount number -amount of filter (0..1).
    2. +amount of filter (0..1)

    Returns: string filter representation

    -

    Snap.filter.saturate(amount)

    -

    Returns string of the saturate filter. +

    Snap.filter.saturate(amount)

    +

    Returns an SVG markup string for the saturate filter

    Parameters

    1. amount number -amount of filter (0..1).
    2. +amount of filter (0..1)

    Returns: string filter representation

    -

    Snap.filter.sepia(amount)

    -

    Returns string of the sepia filter. +

    Snap.filter.sepia(amount)

    +

    Returns an SVG markup string for the sepia filter

    Parameters

    1. amount number -amount of filter (0..1).
    2. +amount of filter (0..1)

    Returns: string filter representation

    -

    Snap.filter.shadow(dx, dy, [blur], [color])

    -

    Returns string of the shadow filter. +

    Snap.filter.shadow(dx, dy, [blur], [color])

    +

    Returns an SVG markup string for the shadow filter

    Parameters

    1. dx number -horisontal shift of the shadow in px.
    2. +horizontal shift of the shadow, in pixels
    3. dy number -vertical shift of the shadow in px.
    4. +vertical shift of the shadow, in pixels
    5. blur optional number -amount of blur.
    6. +amount of blur
    7. color optional string -color of the shadow.
    8. +color of the shadow

    Returns: string filter representation

    Usage

    var f = paper.filter(Snap.filter.shadow(0, 2, 3)),
    @@ -1395,18 +1382,18 @@ Returns matrix based on given parameters.
             filter: f
         });
     
    -

    Snap.format(token, json)

    -

    Replaces construction of type “{<name>}” to the corresponding argument. +

    Snap.format(token, json)

    +

    Replaces construction of type {<name>} to the corresponding argument

    Parameters

    1. token string string to format
    2. json object -object which properties will be used as a replacement
    3. +object which properties are used as a replacement
    -

    Returns: string formated string

    -

    Usage

    // this will draw a rectangular shape equivalent to "M10,20h40v50h-40z"
    +

    Returns: string formatted string

    +

    Usage

    // this draws a rectangular shape equivalent to "M10,20h40v50h-40z"
     paper.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']}z", {
         x: 10,
         y: 20,
    @@ -1417,49 +1404,49 @@ paper.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']
         }
     }));
     
    -

    Snap.fragment(varargs)

    -

    Creates DOM fragment from given list of elements or strings +

    Snap.fragment(varargs)

    +

    Creates a DOM fragment from a given list of elements or strings

    Parameters

    1. varargs SVG string

    Returns: Fragment the Fragment

    -

    Snap.getRGB(colour)

    -

    Parses colour string as RGB object +

    Snap.getRGB(color)

    +

    Parses color string as RGB object

    -

    Parameters

    1. colour +

      Parameters

      1. color string -colour string in one of formats:
      2. +color string in one of the following formats:
        -
      • Colour name (“red”, “green”, “cornflowerblue”, etc)
      • -
      • #••• — shortened HTML colour: (“#000”, “#fc0”, etc)
      • -
      • #•••••• — full length HTML colour: (“#000000”, “#bd2300”)
      • -
      • rgb(•••, •••, •••) — red, green and blue channels values: (“rgb(200, 100, 0)”)
      • +
      • Color name (red, green, cornflowerblue, etc)
      • +
      • #••• — shortened HTML color: (#000, #fc0, etc.)
      • +
      • #•••••• — full length HTML color: (#000000, #bd2300)
      • +
      • rgb(•••, •••, •••) — red, green and blue channels values: (rgb(200, 100, 0))
      • rgba(•••, •••, •••, •••) — also with opacity
      • -
      • rgb(•••%, •••%, •••%) — same as above, but in %: (“rgb(100%, 175%, 0%)”)
      • +
      • rgb(•••%, •••%, •••%) — same as above, but in %: (rgb(100%, 175%, 0%))
      • rgba(•••%, •••%, •••%, •••%) — also with opacity
      • -
      • hsb(•••, •••, •••) — hue, saturation and brightness values: (“hsb(0.5, 0.25, 1)”)
      • +
      • hsb(•••, •••, •••) — hue, saturation and brightness values: (hsb(0.5, 0.25, 1))
      • hsba(•••, •••, •••, •••) — also with opacity
      • hsb(•••%, •••%, •••%) — same as above, but in %
      • hsba(•••%, •••%, •••%, •••%) — also with opacity
      • -
      • hsl(•••, •••, •••) — hue, saturation and luminosity values: (“hsb(0.5, 0.25, 0.5)”)
      • +
      • hsl(•••, •••, •••) — hue, saturation and luminosity values: (hsb(0.5, 0.25, 0.5))
      • hsla(•••, •••, •••, •••) — also with opacity
      • hsl(•••%, •••%, •••%) — same as above, but in %
      • hsla(•••%, •••%, •••%, •••%) — also with opacity

      Note that % can be used any time: rgb(20%, 255, 50%).

      -

      Returns: object RGB object in format:

      +

      Returns: object RGB object in the following format:

      1. {
        1. rnumberred,
        2. gnumbergreen, -
        3. bnumberblue +
        4. bnumberblue,
        5. hexstringcolor in HTML/CSS format: #••••••, -
        6. errorbooleantrue if string cant be parsed +
        7. errorbooleantrue if string can't be parsed
      2. }
      -

    Snap.hsb(h, s, b)

    -

    Converts HSB values to hex representation of the colour. +

    Snap.hsb(h, s, b)

    +

    Converts HSB values to a hex representation of the color

    Parameters

    1. h number @@ -1471,9 +1458,9 @@ paper.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width'] number value or brightness
    -

    Returns: string hex representation of the colour.

    -

    Snap.hsb2rgb(h, s, v)

    -

    Converts HSB values to RGB object. +

    Returns: string hex representation of the color

    +

    Snap.hsb2rgb(h, s, v)

    +

    Converts HSB values to an RGB object

    Parameters

    1. h number @@ -1485,14 +1472,14 @@ paper.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width'] number value or brightness
    -

    Returns: object RGB object in format:

    +

    Returns: object RGB object in the following format:

    1. {
      1. rnumberred,
      2. gnumbergreen,
      3. bnumberblue,
      4. hexstringcolor in HTML/CSS format: #••••••
    2. }
    -

    Snap.hsl(h, s, l)

    -

    Converts HSL values to hex representation of the colour. +

    Snap.hsl(h, s, l)

    +

    Converts HSL values to a hex representation of the color

    Parameters

    1. h number @@ -1504,9 +1491,9 @@ paper.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width'] number luminosity
    -

    Returns: string hex representation of the colour.

    -

    Snap.hsl2rgb(h, s, l)

    -

    Converts HSL values to RGB object. +

    Returns: string hex representation of the color

    +

    Snap.hsl2rgb(h, s, l)

    +

    Converts HSL values to an RGB object

    Parameters

    1. h number @@ -1518,25 +1505,25 @@ paper.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width'] number luminosity
    -

    Returns: object RGB object in format:

    +

    Returns: object RGB object in the following format:

    1. {
      1. rnumberred,
      2. gnumbergreen,
      3. bnumberblue,
      4. hexstringcolor in HTML/CSS format: #••••••
    2. }
    -

    Snap.is(o, type)

    -

    Handfull replacement for typeof operator. +

    Snap.is(o, type)

    +

    Handy replacement for the typeof operator

    Parameters

    1. o any object or primitive
    2. type string -name of the type, i.e. “string”, “function”, “number”, etc.
    3. +name of the type, e.g., string, function, number, etc.
    -

    Returns: boolean is given value is of given type

    -

    Snap.load(url, callback, [scope])

    -

    Loads external SVG file as a Fragment. For more advanced AJAX see Snap.ajax. +

    Returns: boolean true if given value is of given type

    +

    Snap.load(url, callback, [scope])

    +

    Loads external SVG file as a Fragment (see Snap.ajax for more advanced AJAX)

    Parameters

    1. url string @@ -1549,36 +1536,36 @@ paper.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width'] object scope of callback
    -

    Snap.parse(svg)

    -

    Parses SVG fragment and converts it into Fragment. +

    Snap.parse(svg)

    +

    Parses SVG fragment and converts it into a Fragment

    Parameters

    1. svg string SVG string
    -

    Returns: Fragment the fragment

    -

    Snap.parsePathString(pathString)

    +

    Returns: Fragment the Fragment

    +

    Snap.parsePathString(pathString)

    Utility method -Parses given path string into an array of arrays of path segments. +Parses given path string into an array of arrays of path segments

    Parameters

    1. pathString string array -path string or array of segments (in the last case it will be returned straight away)
    2. +path string or array of segments (in the last case it is returned straight away)
    -

    Returns: array array of segments.

    -

    Snap.parseTransformString(TString)

    +

    Returns: array array of segments

    +

    Snap.parseTransformString(TString)

    Utility method -Parses given path string into an array of transformations. +Parses given transform string into an array of transformations

    Parameters

    1. TString string array -transform string or array of transformations (in the last case it will be returned straight away)
    2. +transform string or array of transformations (in the last case it is returned straight away)
    -

    Returns: array array of transformations.

    +

    Returns: array array of transformations

    Snap.path

    -

    Snap.path.bezierBBox(…)

    +

    Snap.path.bezierBBox(…)

    Utility method -Return bounding box of a given cubic bezier curve +Returns the bounding box of a given cubic beziér curve

    Parameters

    1. p1x number @@ -1609,17 +1596,17 @@ Return bounding box of a given cubic bezier curve

      Parameters

      1. bez array -array of six points for bezier curve
      2. +array of six points for beziér curve

      Returns: object point information in format:

      -
      1. {
        1. min: {
          1. x:numberx coordinate of the left point +
            1. {
              1. min: {
                1. x:numberx coordinate of the left point,
                2. y:numbery coordinate of the top point -
              2. }
              3. max: {
                1. x:numberx coordinate of the right point +
              4. },
              5. max: {
                1. x:numberx coordinate of the right point,
                2. y:numbery coordinate of the bottom point
              6. }
            2. }
            -

    Snap.path.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)

    +

    Snap.path.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)

    Utility method -Find dot coordinates on the given cubic bezier curve at the given t. +Finds dot coordinates on the given cubic beziér curve at the given t

    Parameters

    1. p1x number @@ -1650,72 +1637,72 @@ Find dot coordinates on the given cubic bezier curve at the given t. position on the curve (0..1)

    Returns: object point information in format:

    -
    1. {
      1. x:numberx coordinate of the point -
      2. y:numbery coordinate of the point -
      3. m: {
        1. x:numberx coordinate of the left anchor +
          1. {
            1. x:numberx coordinate of the point, +
            2. y:numbery coordinate of the point, +
            3. m: {
              1. x:numberx coordinate of the left anchor,
              2. y:numbery coordinate of the left anchor -
            4. }
            5. n: {
              1. x:numberx coordinate of the right anchor +
            6. },
            7. n: {
              1. x:numberx coordinate of the right anchor,
              2. y:numbery coordinate of the right anchor -
            8. }
            9. start: {
              1. x:numberx coordinate of the start of the curve +
            10. },
            11. start: {
              1. x:numberx coordinate of the start of the curve,
              2. y:numbery coordinate of the start of the curve -
            12. }
            13. end: {
              1. x:numberx coordinate of the end of the curve +
            14. },
            15. end: {
              1. x:numberx coordinate of the end of the curve,
              2. y:numbery coordinate of the end of the curve -
            16. }
            17. alpha:numberangle of the curve derivative at the point +
          2. },
          3. alpha:numberangle of the curve derivative at the point
        2. }
        -

    Snap.path.getBBox(path)

    +

    Snap.path.getBBox(path)

    Utility method -Return bounding box of a given path +Returns the bounding box of a given path

    Parameters

    1. path string path string

    Returns: object bounding box

    -
    1. {
      1. x:numberx coordinate of the left top point of the box -
      2. y:numbery coordinate of the left top point of the box -
      3. x2:numberx coordinate of the right bottom point of the box -
      4. y2:numbery coordinate of the right bottom point of the box -
      5. width:numberwidth of the box +
        1. {
          1. x:numberx coordinate of the left top point of the box, +
          2. y:numbery coordinate of the left top point of the box, +
          3. x2:numberx coordinate of the right bottom point of the box, +
          4. y2:numbery coordinate of the right bottom point of the box, +
          5. width:numberwidth of the box,
          6. height:numberheight of the box
        2. }

    Snap.path.getPointAtLength(path, length)

    -

    Return coordinates of the point located at the given length on the given path. +

    Returns the coordinates of the point located at the given length along the given path

    Parameters

    1. path string SVG path string
    2. length number - 
    3. +length, in pixels, from the start of the path, excluding non-rendering jumps

    Returns: object representation of the point:

    -
    1. {
      1. x:numberx coordinate -
      2. y:numbery coordinate +
        1. {
          1. x:numberx coordinate, +
          2. y:numbery coordinate,
          3. alpha:numberangle of derivative
        2. }

    Snap.path.getSubpath(path, from, to)

    -

    Return subpath of a given path from given length to given length. +

    Returns the subpath of a given path between given start and end lengths

    Parameters

    1. path string SVG path string
    2. from number -position of the start of the segment
    3. +length, in pixels, from the start of the path to the start of the segment
    4. to number -position of the end of the segment
    5. +length, in pixels, from the start of the path to the end of the segment
    -

    Returns: string pathstring for the segment

    +

    Returns: string path string definition for the segment

    Snap.path.getTotalLength(path)

    -

    Returns length of the given path in pixels. +

    Returns the length of the given path in pixels

    Parameters

    1. path string -SVG path string.
    2. +SVG path string
    -

    Returns: number length.

    -

    Snap.path.intersection(path1, path2)

    +

    Returns: number length

    +

    Snap.path.intersection(path1, path2)

    Utility method Finds intersections of two paths

    @@ -1727,16 +1714,16 @@ Finds intersections of two paths path string

    Returns: array dots of intersection

    -
    1. [
    2. {
      1. x:numberx coordinate of the point -
      2. y:numbery coordinate of the point -
      3. t1:numbert value for segment of path1 -
      4. t2:numbert value for segment of path2 -
      5. segment1:numberorder number for segment of path1 -
      6. segment2:numberorder number for segment of path2 -
      7. bez1:arrayeight coordinates representing beziér curve for the segment of path1 +
        1. [
        2. {
          1. x:numberx coordinate of the point, +
          2. y:numbery coordinate of the point, +
          3. t1:numbert value for segment of path1, +
          4. t2:numbert value for segment of path2, +
          5. segment1:numberorder number for segment of path1, +
          6. segment2:numberorder number for segment of path2, +
          7. bez1:arrayeight coordinates representing beziér curve for the segment of path1,
          8. bez2:arrayeight coordinates representing beziér curve for the segment of path2
        3. }
        4. ]
        -

    Snap.path.isBBoxIntersect(bbox1, bbox2)

    +

    Snap.path.isBBoxIntersect(bbox1, bbox2)

    Utility method Returns true if two bounding boxes intersect

    @@ -1747,10 +1734,10 @@ Returns true if two bounding boxes intersect string second bounding box
    -

    Returns: boolean true if they intersect

    -

    Snap.path.isPointInside(path, x, y)

    +

    Returns: boolean true if bounding boxes intersect

    +

    Snap.path.isPointInside(path, x, y)

    Utility method -Returns true if given point is inside a given closed path. +Returns true if given point is inside a given closed path

    Parameters

    1. path string @@ -1762,10 +1749,10 @@ Returns true if given point is inside a given closed path. number y of the point
    -

    Returns: boolean true, if point is inside the path

    -

    Snap.path.isPointInsideBBox(bbox, x, y)

    +

    Returns: boolean true if point is inside the path

    +

    Snap.path.isPointInsideBBox(bbox, x, y)

    Utility method -Returns true if given point is inside bounding box. +Returns true if given point is inside bounding box

    Parameters

    1. bbox string @@ -1777,9 +1764,9 @@ Returns true if given point is inside bounding box. string y coordinate of the point
    -

    Returns: boolean true if point inside

    -

    Snap.path.map(path, matrix)

    -

    Transform the path string with given matrix. +

    Returns: boolean true if point is inside

    +

    Snap.path.map(path, matrix)

    +

    Transform the path string with the given matrix

    Parameters

    1. path string @@ -1789,43 +1776,43 @@ Returns true if given point is inside bounding box. see Matrix

    Returns: string transformed path string

    -

    Snap.path.toAbsolute(path)

    +

    Snap.path.toAbsolute(path)

    Utility method -Converts path coordinates into absolute values. +Converts path coordinates into absolute values

    Parameters

    1. path string path string

    Returns: array path string

    -

    Snap.path.toCubic(pathString)

    +

    Snap.path.toCubic(pathString)

    Utility method -Converts path to a new path where all segments are cubic bezier curves. +Converts path to a new path where all segments are cubic beziér curves

    Parameters

    1. pathString string array path string or array of segments
    -

    Returns: array array of segments.

    -

    Snap.path.toRelative(path)

    +

    Returns: array array of segments

    +

    Snap.path.toRelative(path)

    Utility method -Converts path coordinates into relative values. +Converts path coordinates into relative values

    Parameters

    1. path string path string

    Returns: array path string

    -

    Snap.rad(deg)

    +

    Snap.rad(deg)

    Transform angle to radians

    Parameters

    1. deg number angle in degrees
    -

    Returns: number angle in radians.

    -

    Snap.rgb(r, g, b)

    -

    Converts RGB values to hex representation of the colour. +

    Returns: number angle in radians

    +

    Snap.rgb(r, g, b)

    +

    Converts RGB values to a hex representation of the color

    Parameters

    1. r number @@ -1837,9 +1824,9 @@ Converts path coordinates into relative values. number blue
    -

    Returns: string hex representation of the colour.

    -

    Snap.rgb2hsb(r, g, b)

    -

    Converts RGB values to HSB object. +

    Returns: string hex representation of the color

    +

    Snap.rgb2hsb(r, g, b)

    +

    Converts RGB values to an HSB object

    Parameters

    1. r number @@ -1851,13 +1838,13 @@ Converts path coordinates into relative values. number blue
    -

    Returns: object HSB object in format:

    -
    1. {
      1. hnumberhue -
      2. snumbersaturation +

        Returns: object HSB object in the following format:

        +
        1. {
          1. hnumberhue, +
          2. snumbersaturation,
          3. bnumberbrightness
        2. }
        -

    Snap.rgb2hsl(r, g, b)

    -

    Converts RGB values to HSL object. +

    Snap.rgb2hsl(r, g, b)

    +

    Converts RGB values to an HSL object

    Parameters

    1. r number @@ -1869,29 +1856,29 @@ Converts path coordinates into relative values. number blue
    -

    Returns: object HSL object in format:

    -
    1. {
      1. hnumberhue -
      2. snumbersaturation +

        Returns: object HSL object in the following format:

        +
        1. {
          1. hnumberhue, +
          2. snumbersaturation,
          3. lnumberluminosity
        2. }
        -

    Snap.select(query)

    -

    Wraps DOM element specified by CSS selector as Element +

    Snap.select(query)

    +

    Wraps a DOM element specified by CSS selector as Element

    Parameters

    1. query string CSS selector of the element
    -

    Returns: Element

    -

    Snap.selectAll(query)

    +

    Returns: Element the current element

    +

    Snap.selectAll(query)

    Wraps DOM elements specified by CSS selector as set or array of Element

    Parameters

    1. query string CSS selector of the element
    -

    Returns: Element

    -

    Snap.snapTo(values, value, [tolerance])

    -

    Snaps given value to given grid. +

    Returns: Element the current element

    +

    Snap.snapTo(values, value, [tolerance])

    +

    Snaps given value to given grid

    Parameters

    1. values array number @@ -1902,30 +1889,30 @@ Converts path coordinates into relative values.
    2. tolerance optional number -tolerance for snapping. Default is 10.
    3. +maximum distance to the target value that would trigger the snap. Default is 10.
    -

    Returns: number adjusted value.

    -

    mina(a, A, b, B, get, set, [easing])

    -

    Generic animation of numbers. +

    Returns: number adjusted value

    +

    mina(a, A, b, B, get, set, [easing])

    +

    Generic animation of numbers

    Parameters

    1. a number -start “slave” number
    2. +start slave number
    3. A number -end “slave” number
    4. +end slave number
    5. b number -start “master” number (start time in gereal case)
    6. +start master number (start time in gereal case)
    7. B number -end “master” number (end time in gereal case)
    8. +end master number (end time in gereal case)
    9. get function -getter of “master” number (see mina.time)
    10. +getter of master number (see mina.time)
    11. set function -setter of “slave” number
    12. +setter of slave number
    13. easing optional function @@ -1933,94 +1920,94 @@ Converts path coordinates into relative values.

    Returns: object animation descriptor

    1. {
      1. idstringanimation id, -
      2. startnumberstart “slave” number, -
      3. endnumberend “slave” number, -
      4. bnumberstart “master” number, +
      5. startnumberstart slave number, +
      6. endnumberend slave number, +
      7. bnumberstart master number,
      8. snumberanimation status (0..1),
      9. durnumberanimation duration,
      10. spdnumberanimation speed, -
      11. getfunctiongetter of “master” number (see mina.time), -
      12. setfunctionsetter of “slave” number, +
      13. getfunctiongetter of master number (see mina.time), +
      14. setfunctionsetter of slave number,
      15. easingfunctioneasing function, default is mina.linear,
      16. statusfunctionstatus getter/setter,
      17. speedfunctionspeed getter/setter,
      18. durationfunctionduration getter/setter,
      19. stopfunctionanimation stopper
    2. }
    -

    mina.backin(n)

    -

    Backin easing. +

    mina.backin(n)

    +

    Backin easing

    Parameters

    1. n number input 0..1

    Returns: number output 0..1

    -

    mina.backout(n)

    -

    Backout easing. +

    mina.backout(n)

    +

    Backout easing

    Parameters

    1. n number input 0..1

    Returns: number output 0..1

    -

    mina.bounce(n)

    -

    Bounce easing. +

    mina.bounce(n)

    +

    Bounce easing

    Parameters

    1. n number input 0..1

    Returns: number output 0..1

    -

    mina.easein(n)

    -

    Easein easing. +

    mina.easein(n)

    +

    Easein easing

    Parameters

    1. n number input 0..1

    Returns: number output 0..1

    -

    mina.easeinout(n)

    -

    Easeinout easing. +

    mina.easeinout(n)

    +

    Easeinout easing

    Parameters

    1. n number input 0..1

    Returns: number output 0..1

    -

    mina.easeout(n)

    -

    Easeout easing. +

    mina.easeout(n)

    +

    Easeout easing

    Parameters

    1. n number input 0..1

    Returns: number output 0..1

    -

    mina.elastic(n)

    -

    Elastic easing. +

    mina.elastic(n)

    +

    Elastic easing

    Parameters

    1. n number input 0..1

    Returns: number output 0..1

    -

    mina.getById(id)

    -

    Returns animation by it’s id. +

    mina.getById(id)

    +

    Returns an animation by its id

    Parameters

    1. id string -animation’s id
    2. +animation's id

    Returns: object See mina

    -

    mina.linear(n)

    -

    Default linear easing. +

    mina.linear(n)

    +

    Default linear easing

    Parameters

    1. n number input 0..1

    Returns: number output 0..1

    -

    mina.time()

    -

    Returns current time. Equal to +

    mina.time()

    +

    Returns the current time. Equivalent to:

    function () {
         return (new Date).getTime();
    diff --git a/dist/snap.svg-min.js b/dist/snap.svg-min.js
    index 8afb21b..406708b 100644
    --- a/dist/snap.svg-min.js
    +++ b/dist/snap.svg-min.js
    @@ -14,7 +14,7 @@
     // See the License for the specific language governing permissions and
     // limitations under the License.
     // 
    -// build: 2013-10-06
    +// build: 2013-10-14
     !function(a){var b,c,d="0.4.2",e="hasOwnProperty",f=/[\.\/]/,g="*",h=function(){},i=function(a,b){return a-b},j={n:{}},k=function(a,d){a=String(a);var e,f=c,g=Array.prototype.slice.call(arguments,2),h=k.listeners(a),j=0,l=[],m={},n=[],o=b;b=a,c=0;for(var p=0,q=h.length;q>p;p++)"zIndex"in h[p]&&(l.push(h[p].zIndex),h[p].zIndex<0&&(m[h[p].zIndex]=h[p]));for(l.sort(i);l[j]<0;)if(e=m[l[j++]],n.push(e.apply(d,g)),c)return c=f,n;for(p=0;q>p;p++)if(e=h[p],"zIndex"in e)if(e.zIndex==l[j]){if(n.push(e.apply(d,g)),c)break;do if(j++,e=m[l[j]],e&&n.push(e.apply(d,g)),c)break;while(e)}else m[e.zIndex]=e;else if(n.push(e.apply(d,g)),c)break;return c=f,b=o,n.length?n:null};k._events=j,k.listeners=function(a){var b,c,d,e,h,i,k,l,m=a.split(f),n=j,o=[n],p=[];for(e=0,h=m.length;h>e;e++){for(l=[],i=0,k=o.length;k>i;i++)for(n=o[i].n,c=[n[m[e]],n[g]],d=2;d--;)b=c[d],b&&(l.push(b),p=p.concat(b.f||[]));o=l}return p},k.on=function(a,b){if(a=String(a),"function"!=typeof b)return function(){};for(var c=a.split(f),d=j,e=0,g=c.length;g>e;e++)d=d.n,d=d.hasOwnProperty(c[e])&&d[c[e]]||(d[c[e]]={n:{}});for(d.f=d.f||[],e=0,g=d.f.length;g>e;e++)if(d.f[e]==b)return h;return d.f.push(b),function(a){+a==+a&&(b.zIndex=+a)}},k.f=function(a){var b=[].slice.call(arguments,1);return function(){k.apply(null,[a,null].concat(b).concat([].slice.call(arguments,0)))}},k.stop=function(){c=1},k.nt=function(a){return a?new RegExp("(?:\\.|\\/|^)"+a+"(?:\\.|\\/|$)").test(b):b},k.nts=function(){return b.split(f)},k.off=k.unbind=function(a,b){if(!a)return k._events=j={n:{}},void 0;var c,d,h,i,l,m,n,o=a.split(f),p=[j];for(i=0,l=o.length;l>i;i++)for(m=0;mi;i++)for(c=p[i];c.n;){if(b){if(c.f){for(m=0,n=c.f.length;n>m;m++)if(c.f[m]==b){c.f.splice(m,1);break}!c.f.length&&delete c.f}for(d in c.n)if(c.n[e](d)&&c.n[d].f){var q=c.n[d].f;for(m=0,n=q.length;n>m;m++)if(q[m]==b){q.splice(m,1);break}!q.length&&delete c.n[d].f}}else{delete c.f;for(d in c.n)c.n[e](d)&&c.n[d].f&&delete c.n[d].f}c=c.n}},k.once=function(a,b){var c=function(){return k.unbind(a,c),b.apply(this,arguments)};return k.on(a,c)},k.version=d,k.toString=function(){return"You are running Eve "+d},"undefined"!=typeof module&&module.exports?module.exports=k:"undefined"!=typeof define?define("eve",[],function(){return k}):a.eve=k}(this),function(a,b){"function"==typeof define&&define.amd?define(["eve"],function(c){return b(a,c)}):b(a,a.eve)}(this,function(a,b){var c=function(b){var c={},d=a.requestAnimationFrame||a.webkitRequestAnimationFrame||a.mozRequestAnimationFrame||a.oRequestAnimationFrame||a.msRequestAnimationFrame||function(a){setTimeout(a,16)},e=Array.isArray||function(a){return a instanceof Array||"[object Array]"==Object.prototype.toString.call(a)},f=0,g="M"+(+new Date).toString(36),h=function(){return g+(f++).toString(36)},i=function(){return+new Date},j=function(a){var b=this;if(null==a)return b.s;var c=b.s-a;b.b+=b.dur*c,b.B+=b.dur*c,b.s=a},k=function(a){var b=this;return null==a?b.spd:(b.spd=a,void 0)},l=function(a){var b=this;return null==a?b.dur:(b.s=b.s*a/b.dur,b.dur=a,void 0)},m=function(){var a=this;delete c[a.id],b("mina.stop."+a.id,a)},n=function(){var a=this;a.pdif||(delete c[a.id],a.pdif=a.get()-a.b)},o=function(){var a=this;a.pdif&&(a.b=a.get()-a.pdif,delete a.pdif,c[a.id]=a)},p=function(){var a=0;for(var f in c)if(c.hasOwnProperty(f)){var g,h=c[f],i=h.get();if(a++,h.s=(i-h.b)/(h.dur/h.spd),h.s>=1&&(delete c[f],h.s=1,a--),e(h.start)){g=[];for(var j=0,k=h.start.length;k>j;j++)g[j]=h.start[j]+(h.end[j]-h.start[j])*h.easing(h.s)}else g=h.start+(h.end-h.start)*h.easing(h.s);h.set(g),1==h.s&&b("mina.finish."+h.id,h)}a&&d(p)},q=function(a,b,e,f,g,i,r){var s={id:h(),start:a,end:b,b:e,s:0,dur:f-e,spd:1,get:g,set:i,easing:r||q.linear,status:j,speed:k,duration:l,stop:m,pause:n,resume:o};c[s.id]=s;var t,u=0;for(t in c)if(c.hasOwnProperty(t)&&(u++,2==u))break;return 1==u&&d(p),s};return q.time=i,q.getById=function(a){return c[a]||null},q.linear=function(a){return a},q.easeout=function(a){return Math.pow(a,1.7)},q.easein=function(a){return Math.pow(a,.48)},q.easeinout=function(a){if(1==a)return 1;if(0==a)return 0;var b=.48-a/1.04,c=Math.sqrt(.1734+b*b),d=c-b,e=Math.pow(Math.abs(d),1/3)*(0>d?-1:1),f=-c-b,g=Math.pow(Math.abs(f),1/3)*(0>f?-1:1),h=e+g+.5;return 3*(1-h)*h*h+h*h*h},q.backin=function(a){if(1==a)return 1;var b=1.70158;return a*a*((b+1)*a-b)},q.backout=function(a){if(0==a)return 0;a-=1;var b=1.70158;return a*a*((b+1)*a+b)+1},q.elastic=function(a){return a==!!a?a:Math.pow(2,-10*a)*Math.sin((a-.075)*2*Math.PI/.3)+1},q.bounce=function(a){var b,c=7.5625,d=2.75;return 1/d>a?b=c*a*a:2/d>a?(a-=1.5/d,b=c*a*a+.75):2.5/d>a?(a-=2.25/d,b=c*a*a+.9375):(a-=2.625/d,b=c*a*a+.984375),b},a.mina=q,q}("undefined"==typeof b?function(){}:b);!function(){function a(a){a=a||Object(a);for(var b,d,e=1,f=a.length+1,h=c(a,0);f>e;e++)b=d,d=h,h=c(a,e),this.raw+=d,g.call(this,d,h,b);return this._beforeEnd=function(){g.call(this,"","",d)},this}function c(a,b){return a&&(a.charAt?a.charAt(b):a[b])}function d(a,b){this.events=this.events||{},this.events[a]=this.events[a]||[],this.events[a].push(b)}function e(a,c,d){"function"==typeof b&&b("elemental."+a+(c?"."+c:""),null,c,d||"",this.raw);for(var e=this.events&&this.events[a],f=e&&e.length;f--;)try{this.events[a][f](c,d||"",this.raw)}catch(g){}this.raw=""}function f(){g.call(this,"eof"),this.event("eof")}function g(a,b,c){"\n"==a&&this.event("newline"),m[this.mode].call(this,a,b,c)}function h(b,c){var g=function(a){g.parse(a)};return g.mode="text",g.type=String(b||"html").toLowerCase(),g.textchunk="",g.raw="",g.parse=a,g.on=d,g.event=e,g.end=f,c&&(i=c),g}var i={lt:60,"lt;":60,"AMP;":38,AMP:38,"GT;":62,GT:62,"QUOT;":34,QUOT:34,"apos;":39,"bull;":8226,"bullet;":8226,"copy;":169,copy:169,"deg;":176,deg:176},j=/[\x09\x0a\x0b\x0c\x0d\x20\xa0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u2028\u2029\u202f\u205f\u3000]/,k=function(a){var b;return"#"==a.charAt()&&(b="x"==a.charAt(1).toLowerCase()?parseInt(a.substring(2),16):parseInt(a.substring(1),10)),b=i[a],b?String.fromCharCode(b):"&"+a},l=function(){for(var a in this.attr)this.attr.hasOwnProperty(a)&&this.event("attr",a,{value:this.attr[a],tagname:this.tagname,attr:this.attr})},m={text:function(a){switch(a){case"<":case"eof":this.nodename="",this.attr={},this.mode="tag name start",this.raw=this.raw.slice(0,-1),this.textchunk&&this.event("text",this.textchunk),this.raw+=a,this.textchunk="";break;case"&":this.mode="entity",this.entity="";break;default:this.textchunk+=a}},entity:function(a){j.test(a)?(this.textchunk+=k(this.entity),this.mode="text"):";"==a?(this.textchunk+=k(this.entity+a),this.mode="text"):this.entity+=a},special:function(a,b,c){return"!"==c&&"-"==a&&"-"==b?(this.mode="comment start",void 0):"[CDATA"==this.textchunk&&"["==a?(this.mode="cdata",this.textchunk="",void 0):">"==a||"eof"==a?(this.event("special",this.textchunk),this.mode="text",this.textchunk="",void 0):(this.textchunk+=a,void 0)},cdata:function(a,b,c){return"]"==c&&"]"==a&&">"==b?(this.mode="cdata end",this.textchunk=this.textchunk.slice(0,-1),void 0):("eof"==a&&m["cdata end"].call(this),this.textchunk+=a,void 0)},"cdata end":function(){this.event("cdata",this.textchunk),this.textchunk="",this.mode="text"},"comment start":function(a,b){">"==b||"eof"==a?(this.event("comment",""),this.mode="skip"):this.mode="comment"},skip:function(){this.mode="text"},comment:function(a,b,c){"-"==a&&"-"==c&&">"==b?(this.mode="comment end",this.textchunk=this.textchunk.slice(0,-1)):"eof"==a?this.event("comment",this.textchunk):this.textchunk+=a},"comment end":function(){this.event("comment",this.textchunk),this.textchunk="",this.mode="text"},declaration:function(a,b){return"?"==a&&">"==b?(this.mode="declaration end",void 0):("eof"==a&&this.event("comment",this.textchunk),this.textchunk+=a,void 0)},"declaration end":function(){this.event("comment",this.textchunk),this.textchunk="",this.mode="text"},"tag name start":function(a,b,c){if("eof"==a)return this.event("text","<"),void 0;if(!j.test(a)){if(this.mode="tag name","/"==a)return this.mode="close tag name start",void 0;if("!"==a)return this.mode="special",this.textchunk="",void 0;if("?"==a)return this.mode="declaration",void 0;m[this.mode].call(this,a,b,c)}},"close tag name start":function(a,b,c){j.test(a)||(this.mode="close tag name",this.tagname="",this.nodename="",m[this.mode].call(this,a,b,c))},"close tag name":function(a){if(j.test(a))this.tagname=this.nodename;else switch(a){case">":this.event("/tag",this.tagname||this.nodename),this.mode="text";break;default:!this.tagname&&(this.nodename+=a)}},"tag name":function(a,b){if(j.test(a))this.tagname=this.nodename,this.nodename="",this.mode="attr start";else switch(a){case">":this.event("tag",this.nodename),this.mode="text";break;case"/":this.raw+=b,this.event("tag",this.nodename),this.event("/tag",this.nodename),this.mode="skip";break;default:this.nodename+=a}},"attr start":function(a,b,c){j.test(a)||(this.mode="attr",this.nodename="",m[this.mode].call(this,a,b,c))},attr:function(a){if(j.test(a)||"="==a)this.attr[this.nodename]="",this.mode="attr value start";else switch(a){case">":"/"==this.nodename?(delete this.attr["/"],this.event("tag",this.tagname,this.attr),l.call(this),this.event("/tag",this.tagname,!0)):(this.nodename&&(this.attr[this.nodename]=""),this.event("tag",this.tagname,this.attr),l.call(this)),this.mode="text";break;default:this.nodename+=a}},"attr value start":function(a,b,c){if(!j.test(a)){if(this.mode="attr value",this.quote=!1,"'"==a||'"'==a)return this.quote=a,void 0;m[this.mode].call(this,a,b,c)}},"attr value":function(a,b,c){if(j.test(a)&&!this.quote)this.mode="attr start";else if(">"!=a||this.quote)switch(a){case'"':case"'":this.quote==a&&"\\"!=c&&(this.mode="attr start");break;default:this.attr[this.nodename]+=a}else this.event("tag",this.tagname,this.attr),this.mode="text"}};h.version="0.2.4",("undefined"==typeof exports?this:exports).elemental=h}();var d=function(){function d(a,b){if(a){if(a.tagName)return z(a);if(a instanceof u)return a;if(null==b)return a=I.doc.querySelector(a),z(a)}return a=null==a?"100%":a,b=null==b?"100%":b,new y(a,b)}function e(a,b){if(b){if("string"==typeof a&&(a=e(a)),"string"==typeof b)return"xlink:"==b.substring(0,6)?a.getAttributeNS(gb,b.substring(6)):a.getAttribute(b);for(var c in b)if(b[J](c)){var d=K(b[c]);d?"xlink:"==c.substring(0,6)?a.setAttributeNS(gb,c.substring(6),d):a.setAttribute(c,d):a.removeAttribute(c)}}else a=I.doc.createElementNS("http://www.w3.org/2000/svg",a);return a}function f(a,b){return b=K.prototype.toLowerCase.call(b),"finite"==b?!W[J](+a):"array"==b&&(a instanceof Array||Array.isArray&&Array.isArray(a))?!0:"null"==b&&null===a||b==typeof a&&null!==a||"object"==b&&a===Object(a)||U.call(a).slice(8,-1).toLowerCase()==b}function g(a){if("function"==typeof a||Object(a)!==a)return a;var b=new a.constructor;for(var c in a)a[J](c)&&(b[c]=g(a[c]));return b}function h(a,b){for(var c=0,d=a.length;d>c;c++)if(a[c]===b)return a.push(a.splice(c,1)[0])}function i(a,b,c){function d(){var e=Array.prototype.slice.call(arguments,0),f=e.join("␀"),g=d.cache=d.cache||{},i=d.count=d.count||[];return g[J](f)?(h(i,f),c?c(g[f]):g[f]):(i.length>=1e3&&delete g[i.shift()],i.push(f),g[f]=a.apply(b,e),c?c(g[f]):g[f])}return d}function j(a,b,c,d,e,f){if(null==e){var g=a-c,h=b-d;return g||h?(180+180*N.atan2(-h,-g)/R+360)%360:0}return j(a,b,e,f)-j(c,d,e,f)}function k(a){return a%360*R/180}function l(a){return 180*a/R%360}function m(){return this.x+T+this.y+T+this.width+" × "+this.height}function n(a,b,c,d,e,f){return null==b&&"[object SVGMatrix]"==U.call(a)?(this.a=a.a,this.b=a.b,this.c=a.c,this.d=a.d,this.e=a.e,this.f=a.f,void 0):(null!=a?(this.a=+a,this.b=+b,this.c=+c,this.d=+d,this.e=+e,this.f=+f):(this.a=1,this.b=0,this.c=0,this.d=1,this.e=0,this.f=0),void 0)}function o(a){var b=[];return a=a.replace(/(?:^|\s)(\w+)\(([^)]+)\)/g,function(a,c,d){return d=d.split(/\s*,\s*/),"rotate"==c&&1==d.length&&d.push(0,0),"scale"==c&&(2==d.length&&d.push(0,0),1==d.length&&d.push(d[0],0,0)),"skewX"==c?b.push(["m",1,0,N.tan(k(d[0])),1,0,0]):"skewY"==c?b.push(["m",1,N.tan(k(d[0])),0,1,0,0]):b.push([c.charAt(0)].concat(d)),a}),b}function p(a,b){var c=pb(a),d=0,e=1,f=1,g=new n;if(c)for(var h=0,i=c.length;i>h;h++){var j,k,l,m,o,p=c[h],q=p.length,r=K(p[0]).toLowerCase(),s=p[0]!=r,t=s?g.invert():0;"t"==r&&3==q?s?(j=t.x(0,0),k=t.y(0,0),l=t.x(p[1],p[2]),m=t.y(p[1],p[2]),g.translate(l-j,m-k)):g.translate(p[1],p[2]):"r"==r?2==q?(o=o||b,g.rotate(p[1],o.x+o.width/2,o.y+o.height/2),d+=p[1]):4==q&&(s?(l=t.x(p[2],p[3]),m=t.y(p[2],p[3]),g.rotate(p[1],l,m)):g.rotate(p[1],p[2],p[3]),d+=p[1]):"s"==r?2==q||3==q?(o=o||b,g.scale(p[1],p[q-1],o.x+o.width/2,o.y+o.height/2),e*=p[1],f*=p[q-1]):5==q&&(s?(l=t.x(p[3],p[4]),m=t.y(p[3],p[4]),g.scale(p[1],p[2],l,m)):g.scale(p[1],p[2],p[3],p[4]),e*=p[1],f*=p[2]):"m"==r&&7==q&&g.add(p[1],p[2],p[3],p[4],p[5],p[6])}return g}function q(a,b){if(null==b){var c=!0;if(b="linearGradient"==a.type||"radialGradient"==a.type?a.node.getAttribute("gradientTransform"):"pattern"==a.type?a.node.getAttribute("patternTransform"):a.node.getAttribute("transform"),!b)return new n;b=o(b)}else b=qb.test(b)?K(b).replace(/\.{3}|\u2026/g,a._.transform||S):o(b);a._.transform=b;var d=p(b,a.getBBox(1));return c?d:(a.matrix=d,void 0)}function r(a){if(d._.someDefs)return d._.someDefs;var b=a.paper||a.node.parentNode&&d(a.node.parentNode)||d.select("svg")||d(0,0),c=b.select("defs").node;return c||(c=x("defs",b.node).node),d._.someDefs=c,c}function s(a,b,c){function d(a){return null==a?S:a==+a?a:(e(j,{width:a}),j.getBBox().width)}function f(a){return null==a?S:a==+a?a:(e(j,{height:a}),j.getBBox().height)}function g(d,e){null==b?i[d]=e(a.attr(d)):d==b&&(i=e(null==c?a.attr(d):c))}var h=r(a),i={},j=h.querySelector(".svg---mgr");switch(j||(j=e("rect"),e(j,{width:10,height:10,"class":"svg---mgr"}),h.appendChild(j)),a.type){case"rect":g("rx",d),g("ry",f);case"image":g("width",d),g("height",f);case"text":g("x",d),g("y",f);break;case"circle":g("cx",d),g("cy",f),g("r",d);break;case"ellipse":g("cx",d),g("cy",f),g("rx",d),g("ry",f);break;case"line":g("x1",d),g("x2",d),g("y1",f),g("y2",f);break;case"marker":g("refX",d),g("markerWidth",d),g("refY",f),g("markerHeight",f);break;case"radialGradient":g("fx",d),g("fy",f);break;case"tspan":g("dx",d),g("dy",f);break;default:i=null}return i}function t(a){f(a,"array")||(a=Array.prototype.slice.call(arguments,0));for(var b=0,c=0,d=this.node;this[b];)delete this[b++];for(b=0;bc;c++)if(b=b||a[c])return b}function w(a){this.node=a}function x(a,b){var c=e(a);b.appendChild(c);var d=z(c);return d.type=a,d}function y(a,b){var c,d,f,g=y.prototype;if(a&&"svg"==a.tagName){if(a.snap in hb)return hb[a.snap];c=new u(a),d=a.getElementsByTagName("desc")[0],f=a.getElementsByTagName("defs")[0],d||(d=e("desc"),d.appendChild(I.doc.createTextNode("Created with Snap")),c.node.appendChild(d)),f||(f=e("defs"),c.node.appendChild(f)),c.defs=f;for(var h in g)g[J](h)&&(c[h]=g[h]);c.paper=c.root=c}else c=x("svg",I.doc.body),e(c.node,{height:b,version:1.1,width:a,xmlns:"http://www.w3.org/2000/svg"});return c}function z(a){return a?a instanceof u||a instanceof w?a:"svg"==a.tagName?new y(a):new u(a):a}function A(){return this.selectAll("stop")}function B(a,b){var c=e("stop"),f={offset:+b+"%"};return a=d.color(a),f["stop-color"]=a.hex,a.opacity<1&&(f["stop-opacity"]=a.opacity),e(c,f),this.node.appendChild(c),this}function C(){if("linearGradient"==this.type){var a=e(this.node,"x1")||0,b=e(this.node,"x2")||1,c=e(this.node,"y1")||0,f=e(this.node,"y2")||0;return d._.box(a,c,N.abs(b-a),N.abs(f-c))}var g=this.node.cx||.5,h=this.node.cy||.5,i=this.node.r||0;return d._.box(g-i,h-i,2*i,2*i)}function D(a,c){function d(a,b){for(var c=(b-j)/(a-k),d=k;a>d;d++)h[d].offset=+(+j+c*(d-k)).toFixed(2);k=a,j=b}var f,g=v(b("snap.util.grad.parse",null,c));if(!g)return null;g.params.unshift(a),f="l"==g.type.toLowerCase()?E.apply(0,g.params):F.apply(0,g.params),g.type!=g.type.toLowerCase()&&e(f.node,{gradientUnits:"userSpaceOnUse"});var h=g.stops,i=h.length,j=0,k=0;i--;for(var l=0;i>l;l++)"offset"in h[l]&&d(l,h[l].offset);for(h[i].offset=h[i].offset||100,d(i,h[i].offset),l=0;i>=l;l++){var m=h[l];f.addStop(m.color,m.offset)}return f}function E(a,b,c,d,f){var g=x("linearGradient",a);return g.stops=A,g.addStop=B,g.getBBox=C,null!=b&&e(g.node,{x1:b,y1:c,x2:d,y2:f}),g}function F(a,b,c,d,f,g){var h=x("radialGradient",a);return h.stops=A,h.addStop=B,h.getBBox=C,null!=b&&e(h.node,{cx:b,cy:c,r:d}),null!=f&&null!=g&&e(h.node,{fx:f,fy:g}),h}function G(a){return function(c){if(b.stop(),c instanceof w&&1==c.node.childNodes.length&&("radialGradient"==c.node.firstChild.tagName||"linearGradient"==c.node.firstChild.tagName||"pattern"==c.node.firstChild.tagName)&&(c=c.node.firstChild,r(this).appendChild(c),c=z(c)),c instanceof u)if("radialGradient"==c.type||"linearGradient"==c.type||"pattern"==c.type){c.node.id||e(c.node,{id:c.id});var f="url(#"+c.node.id+")"}else f=c.attr(a);else if(f=d.color(c),f.error){var g=D(r(this),c);g?(g.node.id||e(g.node,{id:g.id}),f="url(#"+g.node.id+")"):f=c}else f=K(f);var h={};h[a]=f,e(this.node,h),this.node.style[a]=S}}function H(a){for(var b=[],c=a.childNodes,d=0,e=c.length;e>d;d++){var f=c[d];3==f.nodeType&&b.push(f.nodeValue),"tspan"==f.tagName&&(1==f.childNodes.length&&3==f.firstChild.nodeType?b.push(f.firstChild.nodeValue):b.push(H(f)))}return b}d.version="0.0.1",d.toString=function(){return"Snap v"+this.version},d._={};var I={win:a,doc:a.document};d._.glob=I;var J="hasOwnProperty",K=String,L=parseFloat,M=parseInt,N=Math,O=N.max,P=N.min,Q=N.abs,R=(N.pow,N.PI),S=(N.round,""),T=" ",U=Object.prototype.toString,V=/^\s*((#[a-f\d]{6})|(#[a-f\d]{3})|rgba?\(\s*([\d\.]+%?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+%?(?:\s*,\s*[\d\.]+%?)?)\s*\)|hsba?\(\s*([\d\.]+(?:deg|\xb0|%)?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+(?:%?\s*,\s*[\d\.]+)?%?)\s*\)|hsla?\(\s*([\d\.]+(?:deg|\xb0|%)?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+(?:%?\s*,\s*[\d\.]+)?%?)\s*\))\s*$/i,W={NaN:1,Infinity:1,"-Infinity":1},X=/^url\(#?([^)]+)\)$/,Y="	\n\f\r   ᠎              \u2028\u2029",Z=new RegExp("[,"+Y+"]+"),$=(new RegExp("["+Y+"]","g"),new RegExp("["+Y+"]*,["+Y+"]*")),_={hs:1,rg:1},ab=new RegExp("([a-z])["+Y+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+Y+"]*,?["+Y+"]*)+)","ig"),bb=new RegExp("([rstm])["+Y+",]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?["+Y+"]*,?["+Y+"]*)+)","ig"),cb=new RegExp("(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)["+Y+"]*,?["+Y+"]*","ig"),db=0,eb="S"+(+new Date).toString(36),fb=function(){return eb+(db++).toString(36)},gb="http://www.w3.org/1999/xlink",hb={};d._.$=e,d._.id=fb,d.format=function(){var a=/\{([^\}]+)\}/g,b=/(?:(?:^|\.)(.+?)(?=\[|\.|$|\()|\[('|")(.+?)\2\])(\(\))?/g,c=function(a,c,d){var e=d;return c.replace(b,function(a,b,c,d,f){b=b||d,e&&(b in e&&(e=e[b]),"function"==typeof e&&f&&(e=e()))}),e=(null==e||e==d?a:e)+""};return function(b,d){return K(b).replace(a,function(a,b){return c(a,b,d)})}}();var ib=function(){function a(){this.parentNode.removeChild(this)}return function(b,c){var d=I.doc.createElement("img"),e=I.doc.body;d.style.cssText="position:absolute;left:-9999em;top:-9999em",d.onload=function(){c.call(d),d.onload=d.onerror=null,e.removeChild(d)},d.onerror=a,e.appendChild(d),d.src=b}}();d._.clone=g,d._.cacher=i,d.rad=k,d.deg=l,d.angle=j,d.is=f,d.snapTo=function(a,b,c){if(c=f(c,"finite")?c:10,f(a,"array")){for(var d=a.length;d--;)if(Q(a[d]-b)<=c)return a[d]}else{a=+a;var e=b%a;if(c>e)return b-e;if(e>a-c)return b-e+a}return b},function(a){function b(a){return a[0]*a[0]+a[1]*a[1]}function c(a){var c=N.sqrt(b(a));a[0]&&(a[0]/=c),a[1]&&(a[1]/=c)}a.add=function(a,b,c,d,e,f){var g,h,i,j,k=[[],[],[]],l=[[this.a,this.c,this.e],[this.b,this.d,this.f],[0,0,1]],m=[[a,c,e],[b,d,f],[0,0,1]];for(a&&a instanceof n&&(m=[[a.a,a.c,a.e],[a.b,a.d,a.f],[0,0,1]]),g=0;3>g;g++)for(h=0;3>h;h++){for(j=0,i=0;3>i;i++)j+=l[g][i]*m[i][h];k[g][h]=j}return this.a=k[0][0],this.b=k[1][0],this.c=k[0][1],this.d=k[1][1],this.e=k[0][2],this.f=k[1][2],this},a.invert=function(){var a=this,b=a.a*a.d-a.b*a.c;return new n(a.d/b,-a.b/b,-a.c/b,a.a/b,(a.c*a.f-a.d*a.e)/b,(a.b*a.e-a.a*a.f)/b)},a.clone=function(){return new n(this.a,this.b,this.c,this.d,this.e,this.f)},a.translate=function(a,b){return this.add(1,0,0,1,a,b)},a.scale=function(a,b,c,d){return null==b&&(b=a),(c||d)&&this.add(1,0,0,1,c,d),this.add(a,0,0,b,0,0),(c||d)&&this.add(1,0,0,1,-c,-d),this},a.rotate=function(a,b,c){a=k(a),b=b||0,c=c||0;var d=+N.cos(a).toFixed(9),e=+N.sin(a).toFixed(9);return this.add(d,e,-e,d,b,c),this.add(1,0,0,1,-b,-c)},a.x=function(a,b){return a*this.a+b*this.c+this.e},a.y=function(a,b){return a*this.b+b*this.d+this.f},a.get=function(a){return+this[K.fromCharCode(97+a)].toFixed(4)},a.toString=function(){return"matrix("+[this.get(0),this.get(1),this.get(2),this.get(3),this.get(4),this.get(5)].join()+")"},a.offset=function(){return[this.e.toFixed(4),this.f.toFixed(4)]},a.split=function(){var a={};a.dx=this.e,a.dy=this.f;var d=[[this.a,this.c],[this.b,this.d]];a.scalex=N.sqrt(b(d[0])),c(d[0]),a.shear=d[0][0]*d[1][0]+d[0][1]*d[1][1],d[1]=[d[1][0]-d[0][0]*a.shear,d[1][1]-d[0][1]*a.shear],a.scaley=N.sqrt(b(d[1])),c(d[1]),a.shear/=a.scaley;var e=-d[0][1],f=d[1][1];return 0>f?(a.rotate=l(N.acos(f)),0>e&&(a.rotate=360-a.rotate)):a.rotate=l(N.asin(e)),a.isSimple=!(+a.shear.toFixed(9)||a.scalex.toFixed(9)!=a.scaley.toFixed(9)&&a.rotate),a.isSuperSimple=!+a.shear.toFixed(9)&&a.scalex.toFixed(9)==a.scaley.toFixed(9)&&!a.rotate,a.noRotation=!+a.shear.toFixed(9)&&!a.rotate,a},a.toTransformString=function(a){var b=a||this.split();return b.isSimple?(b.scalex=+b.scalex.toFixed(4),b.scaley=+b.scaley.toFixed(4),b.rotate=+b.rotate.toFixed(4),(b.dx||b.dy?"t"+[+b.dx.toFixed(4),+b.dy.toFixed(4)]:S)+(1!=b.scalex||1!=b.scaley?"s"+[b.scalex,b.scaley,0,0]:S)+(b.rotate?"r"+[+b.rotate.toFixed(4),0,0]:S)):"m"+[this.get(0),this.get(1),this.get(2),this.get(3),this.get(4),this.get(5)]}}(n.prototype),d.Matrix=n,d.getRGB=i(function(a){if(!a||(a=K(a)).indexOf("-")+1)return{r:-1,g:-1,b:-1,hex:"none",error:1,toString:mb};if("none"==a)return{r:-1,g:-1,b:-1,hex:"none",toString:mb};if(!(_[J](a.toLowerCase().substring(0,2))||"#"==a.charAt())&&(a=jb(a)),!a)return{r:-1,g:-1,b:-1,hex:"none",error:1,toString:mb};var b,c,e,g,h,i,j=a.match(V);return j?(j[2]&&(e=M(j[2].substring(5),16),c=M(j[2].substring(3,5),16),b=M(j[2].substring(1,3),16)),j[3]&&(e=M((h=j[3].charAt(3))+h,16),c=M((h=j[3].charAt(2))+h,16),b=M((h=j[3].charAt(1))+h,16)),j[4]&&(i=j[4].split($),b=L(i[0]),"%"==i[0].slice(-1)&&(b*=2.55),c=L(i[1]),"%"==i[1].slice(-1)&&(c*=2.55),e=L(i[2]),"%"==i[2].slice(-1)&&(e*=2.55),"rgba"==j[1].toLowerCase().slice(0,4)&&(g=L(i[3])),i[3]&&"%"==i[3].slice(-1)&&(g/=100)),j[5]?(i=j[5].split($),b=L(i[0]),"%"==i[0].slice(-1)&&(b/=100),c=L(i[1]),"%"==i[1].slice(-1)&&(c/=100),e=L(i[2]),"%"==i[2].slice(-1)&&(e/=100),("deg"==i[0].slice(-3)||"°"==i[0].slice(-1))&&(b/=360),"hsba"==j[1].toLowerCase().slice(0,4)&&(g=L(i[3])),i[3]&&"%"==i[3].slice(-1)&&(g/=100),d.hsb2rgb(b,c,e,g)):j[6]?(i=j[6].split($),b=L(i[0]),"%"==i[0].slice(-1)&&(b/=100),c=L(i[1]),"%"==i[1].slice(-1)&&(c/=100),e=L(i[2]),"%"==i[2].slice(-1)&&(e/=100),("deg"==i[0].slice(-3)||"°"==i[0].slice(-1))&&(b/=360),"hsla"==j[1].toLowerCase().slice(0,4)&&(g=L(i[3])),i[3]&&"%"==i[3].slice(-1)&&(g/=100),d.hsl2rgb(b,c,e,g)):(b=P(N.round(b),255),c=P(N.round(c),255),e=P(N.round(e),255),g=P(O(g,0),1),j={r:b,g:c,b:e,toString:mb},j.hex="#"+(16777216|e|c<<8|b<<16).toString(16).slice(1),j.opacity=f(g,"finite")?g:1,j)):{r:-1,g:-1,b:-1,hex:"none",error:1,toString:mb}},d),d.hsb=i(function(a,b,c){return d.hsb2rgb(a,b,c).hex}),d.hsl=i(function(a,b,c){return d.hsl2rgb(a,b,c).hex}),d.rgb=i(function(a,b,c,d){if(f(d,"finite")){var e=N.round;return"rgba("+[e(a),e(b),e(c),+d.toFixed(2)]+")"}return"#"+(16777216|c|b<<8|a<<16).toString(16).slice(1)});var jb=function(a){var b=I.doc.getElementsByTagName("head")[0],c="rgb(255, 0, 0)";return jb=i(function(a){if("red"==a.toLowerCase())return c;b.style.color=c,b.style.color=a;var d=I.doc.defaultView.getComputedStyle(b,S).getPropertyValue("color");return d==c?null:d}),jb(a)},kb=function(){return"hsb("+[this.h,this.s,this.b]+")"},lb=function(){return"hsl("+[this.h,this.s,this.l]+")"},mb=function(){return 1==this.opacity||null==this.opacity?this.hex:"rgba("+[this.r,this.g,this.b,this.opacity]+")"},nb=function(a,b,c){if(null==b&&f(a,"object")&&"r"in a&&"g"in a&&"b"in a&&(c=a.b,b=a.g,a=a.r),null==b&&f(a,string)){var e=d.getRGB(a);a=e.r,b=e.g,c=e.b}return(a>1||b>1||c>1)&&(a/=255,b/=255,c/=255),[a,b,c]},ob=function(a,b,c,e){a=N.round(255*a),b=N.round(255*b),c=N.round(255*c);var g={r:a,g:b,b:c,opacity:f(e,"finite")?e:1,hex:d.rgb(a,b,c),toString:mb};return f(e,"finite")&&(g.opacity=e),g};d.color=function(a){var b;return f(a,"object")&&"h"in a&&"s"in a&&"b"in a?(b=d.hsb2rgb(a),a.r=b.r,a.g=b.g,a.b=b.b,a.opacity=1,a.hex=b.hex):f(a,"object")&&"h"in a&&"s"in a&&"l"in a?(b=d.hsl2rgb(a),a.r=b.r,a.g=b.g,a.b=b.b,a.opacity=1,a.hex=b.hex):(f(a,"string")&&(a=d.getRGB(a)),f(a,"object")&&"r"in a&&"g"in a&&"b"in a&&!("error"in a)?(b=d.rgb2hsl(a),a.h=b.h,a.s=b.s,a.l=b.l,b=d.rgb2hsb(a),a.v=b.b):(a={hex:"none"},a.r=a.g=a.b=a.h=a.s=a.v=a.l=-1,a.error=1)),a.toString=mb,a},d.hsb2rgb=function(a,b,c,d){f(a,"object")&&"h"in a&&"s"in a&&"b"in a&&(c=a.b,b=a.s,a=a.h,d=a.o),a*=360;var e,g,h,i,j;return a=a%360/60,j=c*b,i=j*(1-Q(a%2-1)),e=g=h=c-j,a=~~a,e+=[j,i,0,0,i,j][a],g+=[i,j,j,i,0,0][a],h+=[0,0,i,j,j,i][a],ob(e,g,h,d)},d.hsl2rgb=function(a,b,c,d){f(a,"object")&&"h"in a&&"s"in a&&"l"in a&&(c=a.l,b=a.s,a=a.h),(a>1||b>1||c>1)&&(a/=360,b/=100,c/=100),a*=360;var e,g,h,i,j;return a=a%360/60,j=2*b*(.5>c?c:1-c),i=j*(1-Q(a%2-1)),e=g=h=c-j/2,a=~~a,e+=[j,i,0,0,i,j][a],g+=[i,j,j,i,0,0][a],h+=[0,0,i,j,j,i][a],ob(e,g,h,d)},d.rgb2hsb=function(a,b,c){c=nb(a,b,c),a=c[0],b=c[1],c=c[2];var d,e,f,g;return f=O(a,b,c),g=f-P(a,b,c),d=0==g?null:f==a?(b-c)/g:f==b?(c-a)/g+2:(a-b)/g+4,d=60*((d+360)%6)/360,e=0==g?0:g/f,{h:d,s:e,b:f,toString:kb}},d.rgb2hsl=function(a,b,c){c=nb(a,b,c),a=c[0],b=c[1],c=c[2];var d,e,f,g,h,i;return g=O(a,b,c),h=P(a,b,c),i=g-h,d=0==i?null:g==a?(b-c)/i:g==b?(c-a)/i+2:(a-b)/i+4,d=60*((d+360)%6)/360,f=(g+h)/2,e=0==i?0:.5>f?i/(2*f):i/(2-2*f),{h:d,s:e,l:f,toString:lb}},d.parsePathString=function(a){if(!a)return null;var b=d.path(a);if(b.arr)return d.path.clone(b.arr);var c={a:7,c:6,o:2,h:1,l:2,m:2,r:4,q:4,s:4,t:2,v:1,u:3,z:0},e=[];return f(a,"array")&&f(a[0],"array")&&(e=d.path.clone(a)),e.length||K(a).replace(ab,function(a,b,d){var f=[],g=b.toLowerCase();if(d.replace(cb,function(a,b){b&&f.push(+b)}),"m"==g&&f.length>2&&(e.push([b].concat(f.splice(0,2))),g="l",b="m"==b?"l":"L"),"o"==g&&1==f.length&&e.push([b,f[0]]),"r"==g)e.push([b].concat(f));else for(;f.length>=c[g]&&(e.push([b].concat(f.splice(0,c[g]))),c[g]););}),e.toString=d.path.toString,b.arr=d.path.clone(e),e};var pb=d.parseTransformString=function(a){if(!a)return null;var b=[];return f(a,"array")&&f(a[0],"array")&&(b=d.path.clone(a)),b.length||K(a).replace(bb,function(a,c,d){var e=[];c.toLowerCase(),d.replace(cb,function(a,b){b&&e.push(+b)}),b.push([c].concat(e))}),b.toString=d.path.toString,b},qb=new RegExp("^[a-z]["+Y+"]*-?\\.?\\d");d._.transform2matrix=p,d._unit2px=s,d._.getSomeDefs=r,d.select=function(a){return z(I.doc.querySelector(a))},d.selectAll=function(a){for(var b=I.doc.querySelectorAll(a),c=(d.set||Array)(),e=0;ej;j++){d=f[j],b(d,"fill"),b(d,"stroke"),b(d,"filter"),b(d,"mask"),b(d,"clip-path"),c(d);var l=e(d.node,"id");l&&(e(d.node,{id:d.id}),h.push({old:l,id:d.id}))}for(j=0,k=h.length;k>j;j++){var m=i[h[j].old];if(m)for(var n=0,o=m.length;o>n;n++)m[n](h[j].id)}}function h(a,b,c){return function(d){var e=d.slice(a,b);return 1==e.length&&(e=e[0]),c?c(e):e}}function i(a){return function(){var b=a?"<"+this.type:"",c=this.node.attributes,d=this.node.childNodes;if(a)for(var e=0,f=c.length;f>e;e++)b+=" "+c[e].name+'="'+c[e].value.replace(/"/g,'\\"')+'"';if(d.length){for(a&&(b+=">"),e=0,f=d.length;f>e;e++)3==d[e].nodeType?b+=d[e].nodeValue:1==d[e].nodeType&&(b+=z(d[e]).toString());a&&(b+="")}else a&&(b+="/>");return b}}a.attr=function(a,c){var d=this;if(d.node,!a)return d;if(f(a,"string")){if(!(arguments.length>1))return v(b("snap.util.getattr."+a,d));var e={};e[a]=c,a=e}for(var g in a)a[J](g)&&b("snap.util.attr."+g,d,a[g]);return d},a.getBBox=function(a){var b=this;if("use"==b.type&&(b=b.original),b.removed)return{};var c=b._;return a?((c.dirty||!c.bboxwt)&&(b.realPath=d.path.get[b.type](b),c.bboxwt=d.path.getBBox(b.realPath),c.bboxwt.toString=m,c.dirty=0),d._.box(c.bboxwt)):((c.dirty||c.dirtyT||!c.bbox)&&((c.dirty||!b.realPath)&&(c.bboxwt=0,b.realPath=d.path.get[b.type](b)),c.bbox=d.path.getBBox(d.path.map(b.realPath,b.matrix)),c.bbox.toString=m,c.dirty=c.dirtyT=0),d._.box(c.bbox))};var j=function(){return this.local};a.transform=function(a){var b=this._;if(null==a){var c=new n(this.node.getCTM()),d=q(this);return{string:K(b.transform)||"",globalMatrix:c,localMatrix:d,diffMatrix:c.clone().add(d.invert()),global:c.toTransformString(),local:d.toTransformString(),toString:j}}return a instanceof n&&(a=a.toTransformString()),q(this,a),this.node&&("linearGradient"==this.type||"radialGradient"==this.type?e(this.node,{gradientTransform:this.matrix}):"pattern"==this.type?e(this.node,{patternTransform:this.matrix}):e(this.node,{transform:this.matrix})),this},a.parent=function(){return z(this.node.parentNode)},a.append=a.add=function(a){if("set"==a.type){var b=this;return a.forEach(function(a){b.append(a)}),this}return a=z(a),this.node.appendChild(a.node),a.paper=this.paper,this},a.prepend=function(a){return a=z(a),this.node.insertBefore(a.node,this.node.firstChild),a.paper=this.paper,this},a.before=function(a){return a=z(a),this.node.parentNode.insertBefore(a.node,this.node),a.paper=this.paper,this},a.after=function(a){return a=z(a),this.node.parentNode.insertBefore(a.node,this.node.nextSibling),a.paper=this.paper,this},a.insertBefore=function(a){return a=z(a),a.node.parentNode.insertBefore(this.node,a.node),this.paper=a.paper,this},a.insertAfter=function(a){return a=z(a),a.node.parentNode.insertBefore(this.node,a.node.nextSibling),this.paper=a.paper,this},a.remove=function(){return this.node.parentNode&&this.node.parentNode.removeChild(this.node),delete this.paper,this.removed=!0,this},a.select=function(a){return z(this.node.querySelector(a))},a.selectAll=function(a){for(var b=this.node.querySelectorAll(a),c=(d.set||Array)(),e=0;eb;b++)a[b].stop();return this},a.animate=function(a,d,e,g){"function"!=typeof e||e.length||(g=e,e=c.linear),a instanceof k&&(g=a.callback,e=a.easing,d=e.dur,a=a.attr);var i,j,l,m,n=[],o=[],p={},q=this;for(var r in a)if(a[J](r)){q.equal?(m=q.equal(r,K(a[r])),i=m.from,j=m.to,l=m.f):(i=+q.attr(r),j=+a[r]);var s=f(i,"array")?i.length:1;p[r]=h(n.length,n.length+s,l),n=n.concat(i),o=o.concat(j)}var t=c.time(),u=c(n,o,t,t+d,c.time,function(a){var b={};for(var c in p)p[J](c)&&(b[c]=p[c](a));q.attr(b)},e);return q.anims[u.id]=u,u._attrs=a,u._callback=g,b.once("mina.finish."+u.id,function(){delete q.anims[u.id],g&&g.call(q)}),b.once("mina.stop."+u.id,function(){delete q.anims[u.id]}),q};var l={};a.data=function(a,c){var e=l[this.id]=l[this.id]||{};if(1==arguments.length){if(d.is(a,"object")){for(var f in a)a[J](f)&&this.data(f,a[f]);return this}return b("snap.data.get."+this.id,this,e[a],a),e[a]}return e[a]=c,b("snap.data.set."+this.id,this,c,a),this},a.removeData=function(a){return null==a?l[this.id]={}:l[this.id]&&delete l[this.id][a],this},a.toString=i(1),a.innerSVG=i()}(u.prototype),d.parse=function(a){var c=I.doc.createDocumentFragment(),d=c;return b.on("elemental.tag",function(a,b){var c=e(a);b&&e(c,b),d.appendChild(c),d=c}),b.on("elemental.text",function(a){d.appendChild(I.doc.createTextNode(a))}),b.on("elemental./tag",function(){d=d.parentNode}),b.on("elemental.eof",function(){b.off("elemental.*"),b("snap.parsed",c)}),elemental().parse(a).end(),new w(c)},w.prototype.select=u.prototype.select,w.prototype.selectAll=u.prototype.selectAll,d.fragment=function(){for(var a=Array.prototype.slice.call(arguments,0),b=I.doc.createDocumentFragment(),c=0,e=a.length;e>c;c++){var f=a[c];f.node&&f.node.nodeType&&b.appendChild(f.node),f.nodeType&&b.appendChild(f),"string"==typeof f&&b.appendChild(d.parse(f).node)}return new w(b)},function(a){a.el=function(a,b){return x(a,this.node).attr(b)},a.rect=function(a,b,c,d,e,g){var h=x("rect",this.node);return null==g&&(g=e),f(a,"object")&&"x"in a?h.attr(a):null!=a&&(h.attr({x:a,y:b,width:c,height:d}),null!=e&&h.attr({rx:e,ry:g})),h},a.circle=function(a,b,c){var d=x("circle",this.node);return f(a,"object")&&"cx"in a?d.attr(a):null!=a&&d.attr({cx:a,cy:b,r:c}),d},a.image=function(a,b,c,d,g){var h=x("image",this.node);if(f(a,"object")&&"src"in a)h.attr(a);else if(null!=a){var i={"xlink:href":a,preserveAspectRatio:"none"};null!=b&&null!=c&&(i.x=b,i.y=c),null!=d&&null!=g?(i.width=d,i.height=g):ib(a,function(){e(h.node,{width:this.offsetWidth,height:this.offsetHeight})}),e(h.node,i)}return h},a.ellipse=function(a,b,c,d){var e=x("ellipse",this.node);return f(a,"object")&&"cx"in a?e.attr(a):null!=a&&e.attr({cx:a,cy:b,rx:c,ry:d}),e},a.path=function(a){var b=x("path",this.node);return f(a,"object")&&!f(a,"array")?b.attr(a):a&&b.attr({d:a}),b},a.group=a.g=function(b){var c=x("g",this.node);c.add=t;for(var d in a)a[J](d)&&(c[d]=a[d]);return 1==arguments.length&&b&&!b.type?c.attr(b):arguments.length&&c.add(Array.prototype.slice.call(arguments,0)),c},a.text=function(a,b,c){var d=x("text",this.node);return f(a,"object")?d.attr(a):null!=a&&d.attr({x:a,y:b,text:c||""}),d},a.line=function(a,b,c,d){var e=x("line",this.node);return f(a,"object")?e.attr(a):null!=a&&e.attr({x1:a,x2:c,y1:b,y2:d}),e},a.polyline=function(a){arguments.length>1&&(a=Array.prototype.slice.call(arguments,0));var b=x("polyline",this.node);return f(a,"object")&&!f(a,"array")?b.attr(a):null!=a&&b.attr({points:a}),b},a.polygon=function(a){arguments.length>1&&(a=Array.prototype.slice.call(arguments,0));var b=x("polygon",this.node);return f(a,"object")&&!f(a,"array")?b.attr(a):null!=a&&b.attr({points:a}),b},function(){a.gradient=function(a){return D(this.defs,a)},a.gradientLinear=function(a,b,c,d){return E(this.defs,a,b,c,d)},a.gradientRadial=function(a,b,c,d,e){return F(this.defs,a,b,c,d,e)},a.toString=function(){var a,b=I.doc.createDocumentFragment(),c=I.doc.createElement("div"),d=this.node.cloneNode(!0);return b.appendChild(c),c.appendChild(d),e(d,{xmlns:"http://www.w3.org/2000/svg"}),a=c.innerHTML,b.removeChild(b.firstChild),a}}()}(y.prototype),d.ajax=function(a,c,d,e){var g=new XMLHttpRequest,h=fb();if(g){if(f(c,"function"))e=d,d=c,c=null;else if(f(c,"object")){var i=[];for(var j in c)c.hasOwnProperty(j)&&i.push(encodeURIComponent(j)+"="+encodeURIComponent(c[j]));c=i.join("&")}return g.open(c?"POST":"GET",a,!0),g.setRequestHeader("X-Requested-With","XMLHttpRequest"),c&&g.setRequestHeader("Content-type","application/x-www-form-urlencoded"),d&&(b.once("snap.ajax."+h+".0",d),b.once("snap.ajax."+h+".200",d),b.once("snap.ajax."+h+".304",d)),g.onreadystatechange=function(){4==g.readyState&&b("snap.ajax."+h+"."+g.status,e,g)},4==g.readyState?g:(g.send(c),g)}},d.load=function(a,b,c){d.ajax(a,function(a){var e=d.parse(a.responseText);c?b.call(c,e):b(e)})},b.on("snap.util.attr.mask",function(a){if(a instanceof u||a instanceof w){if(b.stop(),a instanceof w&&1==a.node.childNodes.length&&(a=a.node.firstChild,r(this).appendChild(a),a=z(a)),"mask"==a.type)var c=a;else c=x("mask",r(this)),c.node.appendChild(a.node),!c.node.id&&e(c.node,{id:c.id});e(this.node,{mask:"url(#"+c.id+")"})}}),function(a){b.on("snap.util.attr.clip",a),b.on("snap.util.attr.clip-path",a),b.on("snap.util.attr.clipPath",a)}(function(a){if(a instanceof u||a instanceof w){if(b.stop(),"clipPath"==a.type)var c=a;else c=x("clipPath",r(this)),c.node.appendChild(a.node),!c.node.id&&e(c.node,{id:c.id});e(this.node,{"clip-path":"url(#"+c.id+")"})}}),b.on("snap.util.attr.fill",G("fill")),b.on("snap.util.attr.stroke",G("stroke"));var rb=/^([lr])(?:\(([^)]*)\))?(.*)$/i;b.on("snap.util.grad.parse",function(a){a=K(a);var b=a.match(rb);if(!b)return null;var c=b[1],d=b[2],e=b[3];return d=d.split(/\s*,\s*/).map(function(a){return+a==a?+a:a}),1==d.length&&0==d[0]&&(d=[]),e=e.split("-"),e=e.map(function(a){a=a.split(":");var b={color:a[0]};return a[1]&&(b.offset=a[1]),b}),{type:c,params:d,stops:e}}),b.on("snap.util.attr.d",function(a){b.stop(),f(a,"array")&&f(a[0],"array")&&(a=d.path.toString.call(a)),a=K(a),a.match(/[ruo]/i)&&(a=d.path.toAbsolute(a)),e(this.node,{d:a})})(-1),b.on("snap.util.attr.#text",function(a){b.stop(),a=K(a);for(var c=I.doc.createTextNode(a);this.node.firstChild;)this.node.removeChild(this.node.firstChild);this.node.appendChild(c)})(-1),b.on("snap.util.attr.path",function(a){b.stop(),this.attr({d:a})})(-1),b.on("snap.util.attr.viewBox",function(a){var c;c=f(a,"object")&&"x"in a?[a.x,a.y,a.width,a.height].join(" "):f(a,"array")?a.join(" "):a,e(this.node,{viewBox:c}),b.stop()})(-1),b.on("snap.util.attr.transform",function(a){this.transform(a),b.stop()})(-1),b.on("snap.util.attr.r",function(a){"rect"==this.type&&(b.stop(),e(this.node,{rx:a,ry:a}))})(-1),b.on("snap.util.attr.text",function(a){if("text"==this.type){for(var c=this.node,d=function(a){var b=e("tspan");if(f(a,"array"))for(var c=0;cr;r++){if(l=a[r],"M"==l[0])j=+l[1],k=+l[2];else{if(m=g(j,k,l[1],l[2],l[3],l[4],l[5],l[6]),q+m>f){if(d&&!p.start){if(n=g(j,k,l[1],l[2],l[3],l[4],l[5],l[6],f-q),o+=["C"+e(n.start.x),e(n.start.y),e(n.m.x),e(n.m.y),e(n.x),e(n.y)],h)return o;p.start=o,o=["M"+e(n.x),e(n.y)+"C"+e(n.n.x),e(n.n.y),e(n.end.x),e(n.end.y),e(l[5]),e(l[6])].join(),q+=m,j=+l[5],k=+l[6];continue}if(!c&&!d)return n=g(j,k,l[1],l[2],l[3],l[4],l[5],l[6],f-q)}q+=m,j=+l[5],k=+l[6]}o+=l.shift()+l}return p.end=o,n=c?q:d?p:i(j,k,l[0],l[1],l[2],l[3],l[4],l[5],1)},null,a._.clone)}function i(a,b,c,d,e,f,g,h,i){var j=1-i,k=S(j,3),l=S(j,2),m=i*i,n=m*i,o=k*a+3*l*i*c+3*j*i*i*e+n*g,p=k*b+3*l*i*d+3*j*i*i*f+n*h,q=a+2*i*(c-a)+m*(e-2*c+a),r=b+2*i*(d-b)+m*(f-2*d+b),s=c+2*i*(e-c)+m*(g-2*e+c),t=d+2*i*(f-d)+m*(h-2*f+d),u=j*a+i*c,v=j*b+i*d,w=j*e+i*g,x=j*f+i*h,y=90-180*O.atan2(q-s,r-t)/P;return{x:o,y:p,m:{x:q,y:r},n:{x:s,y:t},start:{x:u,y:v},end:{x:w,y:x},alpha:y}}function j(b,c,e,f,g,h,i,j){a.is(b,"array")||(b=[b,c,e,f,g,h,i,j]);var k=E.apply(null,b);return d(k.min.x,k.min.y,k.max.x-k.min.x,k.max.y-k.min.y)}function k(a,b,c){return b>=a.x&&b<=a.x+a.width&&c>=a.y&&c<=a.y+a.height}function l(a,b){return a=d(a),b=d(b),k(b,a.x,a.y)||k(b,a.x2,a.y)||k(b,a.x,a.y2)||k(b,a.x2,a.y2)||k(a,b.x,b.y)||k(a,b.x2,b.y)||k(a,b.x,b.y2)||k(a,b.x2,b.y2)||(a.xb.x||b.xa.x)&&(a.yb.y||b.ya.y)}function m(a,b,c,d,e){var f=-3*b+9*c-9*d+3*e,g=a*f+6*b-12*c+6*d;return a*g-3*b+3*c}function n(a,b,c,d,e,f,g,h,i){null==i&&(i=1),i=i>1?1:0>i?0:i;for(var j=i/2,k=12,l=[-.1252,.1252,-.3678,.3678,-.5873,.5873,-.7699,.7699,-.9041,.9041,-.9816,.9816],n=[.2491,.2491,.2335,.2335,.2032,.2032,.1601,.1601,.1069,.1069,.0472,.0472],o=0,p=0;k>p;p++){var q=j*l[p]+j,r=m(q,a,c,e,g),s=m(q,b,d,f,h),t=r*r+s*s;o+=n[p]*O.sqrt(t)}return j*o}function o(a,b,c,d,e,f,g,h,i){if(!(0>i||n(a,b,c,d,e,f,g,h)o;)l/=2,m+=(i>j?1:-1)*l,j=n(a,b,c,d,e,f,g,h,m);return m}}function p(a,b,c,d,e,f,g,h){if(!(R(a,c)R(e,g)||R(b,d)R(f,h))){var i=(a*d-b*c)*(e-g)-(a-c)*(e*h-f*g),j=(a*d-b*c)*(f-h)-(b-d)*(e*h-f*g),k=(a-c)*(f-h)-(b-d)*(e-g);if(k){var l=i/k,m=j/k,n=+l.toFixed(2),o=+m.toFixed(2);if(!(n<+Q(a,c).toFixed(2)||n>+R(a,c).toFixed(2)||n<+Q(e,g).toFixed(2)||n>+R(e,g).toFixed(2)||o<+Q(b,d).toFixed(2)||o>+R(b,d).toFixed(2)||o<+Q(f,h).toFixed(2)||o>+R(f,h).toFixed(2)))return{x:l,y:m}}}}function q(a,b,c){var d=j(a),e=j(b);if(!l(d,e))return c?0:[];for(var f=n.apply(0,a),g=n.apply(0,b),h=~~(f/5),k=~~(g/5),m=[],o=[],q={},r=c?0:[],s=0;h+1>s;s++){var t=i.apply(0,a.concat(s/h));m.push({x:t.x,y:t.y,t:s/h})}for(s=0;k+1>s;s++)t=i.apply(0,b.concat(s/k)),o.push({x:t.x,y:t.y,t:s/k});for(s=0;h>s;s++)for(var u=0;k>u;u++){var v=m[s],w=m[s+1],x=o[u],y=o[u+1],z=T(w.x-v.x)<.001?"y":"x",A=T(y.x-x.x)<.001?"y":"x",B=p(v.x,v.y,w.x,w.y,x.x,x.y,y.x,y.y);if(B){if(q[B.x.toFixed(4)]==B.y.toFixed(4))continue;q[B.x.toFixed(4)]=B.y.toFixed(4);var C=v.t+T((B[z]-v[z])/(w[z]-v[z]))*(w.t-v.t),D=x.t+T((B[A]-x[A])/(y[A]-x[A]))*(y.t-x.t);C>=0&&1>=C&&D>=0&&1>=D&&(c?r++:r.push({x:B.x,y:B.y,t1:C,t2:D}))}}return r}function r(a,b){return t(a,b)}function s(a,b){return t(a,b,1)}function t(a,b,c){a=F(a),b=F(b);for(var d,e,f,g,h,i,j,k,l,m,n=c?0:[],o=0,p=a.length;p>o;o++){var r=a[o];if("M"==r[0])d=h=r[1],e=i=r[2];else{"C"==r[0]?(l=[d,e].concat(r.slice(1)),d=l[6],e=l[7]):(l=[d,e,d,e,h,i,h,i],d=h,e=i);for(var s=0,t=b.length;t>s;s++){var u=b[s];if("M"==u[0])f=j=u[1],g=k=u[2];else{"C"==u[0]?(m=[f,g].concat(u.slice(1)),f=m[6],g=m[7]):(m=[f,g,f,g,j,k,j,k],f=j,g=k);var v=q(l,m,c);if(c)n+=v;else{for(var w=0,x=v.length;x>w;w++)v[w].segment1=o,v[w].segment2=s,v[w].bez1=l,v[w].bez2=m;n=n.concat(v)}}}}}return n}function u(a,b,c){var d=v(a);return k(d,b,c)&&1==t(a,[["M",b,c],["H",d.x2+10]],1)%2}function v(a){var b=c(a);if(b.bbox)return K(b.bbox);if(!a)return d();a=F(a);for(var e,f=0,g=0,h=[],i=[],j=0,k=a.length;k>j;j++)if(e=a[j],"M"==e[0])f=e[1],g=e[2],h.push(f),i.push(g);else{var l=E(f,g,e[1],e[2],e[3],e[4],e[5],e[6]);h=h.concat(l.min.x,l.max.x),i=i.concat(l.min.y,l.max.y),f=e[5],g=e[6]}var m=Q.apply(0,h),n=Q.apply(0,i),o=R.apply(0,h),p=R.apply(0,i),q=d(m,n,o-m,p-n);return b.bbox=K(q),q}function w(a,b,c,d,f){if(f)return[["M",a+f,b],["l",c-2*f,0],["a",f,f,0,0,1,f,f],["l",0,d-2*f],["a",f,f,0,0,1,-f,f],["l",2*f-c,0],["a",f,f,0,0,1,-f,-f],["l",0,2*f-d],["a",f,f,0,0,1,f,-f],["z"]];var g=[["M",a,b],["l",c,0],["l",0,d],["l",-c,0],["z"]];return g.toString=e,g}function x(a,b,c,d,f){if(null==f&&null==d&&(d=c),null!=f)var g=Math.PI/180,h=a+c*Math.cos(-d*g),i=a+c*Math.cos(-f*g),j=b+c*Math.sin(-d*g),k=b+c*Math.sin(-f*g),l=[["M",h,j],["A",c,c,0,+(f-d>180),0,i,k]];else l=[["M",a,b],["m",0,-d],["a",c,d,0,1,1,0,2*d],["a",c,d,0,1,1,0,-2*d],["z"]];return l.toString=e,l}function y(b){var d=c(b),g=String.prototype.toLowerCase;if(d.rel)return f(d.rel);a.is(b,"array")&&a.is(b&&b[0],"array")||(b=a.parsePathString(b));var h=[],i=0,j=0,k=0,l=0,m=0;"M"==b[0][0]&&(i=b[0][1],j=b[0][2],k=i,l=j,m++,h.push(["M",i,j]));for(var n=m,o=b.length;o>n;n++){var p=h[n]=[],q=b[n];if(q[0]!=g.call(q[0]))switch(p[0]=g.call(q[0]),p[0]){case"a":p[1]=q[1],p[2]=q[2],p[3]=q[3],p[4]=q[4],p[5]=q[5],p[6]=+(q[6]-i).toFixed(3),p[7]=+(q[7]-j).toFixed(3);break;case"v":p[1]=+(q[1]-j).toFixed(3);break;case"m":k=q[1],l=q[2];default:for(var r=1,s=q.length;s>r;r++)p[r]=+(q[r]-(r%2?i:j)).toFixed(3)}else{p=h[n]=[],"m"==q[0]&&(k=q[1]+i,l=q[2]+j);for(var t=0,u=q.length;u>t;t++)h[n][t]=q[t]}var v=h[n].length;switch(h[n][0]){case"z":i=k,j=l;break;case"h":i+=+h[n][v-1];break;case"v":j+=+h[n][v-1];break;default:i+=+h[n][v-2],j+=+h[n][v-1]}}return h.toString=e,d.rel=f(h),h}function z(b){var d=c(b);if(d.abs)return f(d.abs);if(J(b,"array")&&J(b&&b[0],"array")||(b=a.parsePathString(b)),!b||!b.length)return[["M",0,0]];var g,h=[],i=0,j=0,k=0,l=0,m=0;"M"==b[0][0]&&(i=+b[0][1],j=+b[0][2],k=i,l=j,m++,h[0]=["M",i,j]);for(var n,o,p=3==b.length&&"M"==b[0][0]&&"R"==b[1][0].toUpperCase()&&"Z"==b[2][0].toUpperCase(),q=m,r=b.length;r>q;q++){if(h.push(n=[]),o=b[q],g=o[0],g!=g.toUpperCase())switch(n[0]=g.toUpperCase(),n[0]){case"A":n[1]=o[1],n[2]=o[2],n[3]=o[3],n[4]=o[4],n[5]=o[5],n[6]=+(o[6]+i),n[7]=+(o[7]+j);break;case"V":n[1]=+o[1]+j;break;case"H":n[1]=+o[1]+i;break;case"R":for(var s=[i,j].concat(o.slice(1)),t=2,u=s.length;u>t;t++)s[t]=+s[t]+i,s[++t]=+s[t]+j;h.pop(),h=h.concat(H(s,p));break;case"O":h.pop(),s=x(i,j,o[1],o[2]),s.push(s[0]),h=h.concat(s);break;case"U":h.pop(),h=h.concat(x(i,j,o[1],o[2],o[3])),n=["U"].concat(h[h.length-1].slice(-2));break;case"M":k=+o[1]+i,l=+o[2]+j;default:for(t=1,u=o.length;u>t;t++)n[t]=+o[t]+(t%2?i:j)}else if("R"==g)s=[i,j].concat(o.slice(1)),h.pop(),h=h.concat(H(s,p)),n=["R"].concat(o.slice(-2));else if("O"==g)h.pop(),s=x(i,j,o[1],o[2]),s.push(s[0]),h=h.concat(s);else if("U"==g)h.pop(),h=h.concat(x(i,j,o[1],o[2],o[3])),n=["U"].concat(h[h.length-1].slice(-2));else for(var v=0,w=o.length;w>v;v++)n[v]=o[v];if(g=g.toUpperCase(),"O"!=g)switch(n[0]){case"Z":i=k,j=l;break;case"H":i=n[1];break;case"V":j=n[1];break;case"M":k=n[n.length-2],l=n[n.length-1];default:i=n[n.length-2],j=n[n.length-1]}}return h.toString=e,d.abs=f(h),h}function A(a,b,c,d){return[a,b,c,d,c,d]}function B(a,b,c,d,e,f){var g=1/3,h=2/3;return[g*a+h*c,g*b+h*d,g*e+h*c,g*f+h*d,e,f]}function C(b,c,d,e,f,g,h,i,j,k){var l,m=120*P/180,n=P/180*(+f||0),o=[],p=a._.cacher(function(a,b,c){var d=a*O.cos(c)-b*O.sin(c),e=a*O.sin(c)+b*O.cos(c);return{x:d,y:e}});if(k)y=k[0],z=k[1],w=k[2],x=k[3];else{l=p(b,c,-n),b=l.x,c=l.y,l=p(i,j,-n),i=l.x,j=l.y;var q=(O.cos(P/180*f),O.sin(P/180*f),(b-i)/2),r=(c-j)/2,s=q*q/(d*d)+r*r/(e*e);s>1&&(s=O.sqrt(s),d=s*d,e=s*e);var t=d*d,u=e*e,v=(g==h?-1:1)*O.sqrt(T((t*u-t*r*r-u*q*q)/(t*r*r+u*q*q))),w=v*d*r/e+(b+i)/2,x=v*-e*q/d+(c+j)/2,y=O.asin(((c-x)/e).toFixed(9)),z=O.asin(((j-x)/e).toFixed(9));y=w>b?P-y:y,z=w>i?P-z:z,0>y&&(y=2*P+y),0>z&&(z=2*P+z),h&&y>z&&(y-=2*P),!h&&z>y&&(z-=2*P)}var A=z-y;if(T(A)>m){var B=z,D=i,E=j;z=y+m*(h&&z>y?1:-1),i=w+d*O.cos(z),j=x+e*O.sin(z),o=C(i,j,d,e,f,0,h,D,E,[z,B,w,x])}A=z-y;var F=O.cos(y),G=O.sin(y),H=O.cos(z),I=O.sin(z),J=O.tan(A/4),K=4/3*d*J,L=4/3*e*J,M=[b,c],N=[b+K*G,c-L*F],Q=[i+K*I,j-L*H],R=[i,j];if(N[0]=2*M[0]-N[0],N[1]=2*M[1]-N[1],k)return[N,Q,R].concat(o);o=[N,Q,R].concat(o).join().split(",");for(var S=[],U=0,V=o.length;V>U;U++)S[U]=U%2?p(o[U-1],o[U],n).y:p(o[U],o[U+1],n).x;return S}function D(a,b,c,d,e,f,g,h,i){var j=1-i;return{x:S(j,3)*a+3*S(j,2)*i*c+3*j*i*i*e+S(i,3)*g,y:S(j,3)*b+3*S(j,2)*i*d+3*j*i*i*f+S(i,3)*h}}function E(a,b,c,d,e,f,g,h){var i,j=e-2*c+a-(g-2*e+c),k=2*(c-a)-2*(e-c),l=a-c,m=(-k+O.sqrt(k*k-4*j*l))/2/j,n=(-k-O.sqrt(k*k-4*j*l))/2/j,o=[b,h],p=[a,g];return T(m)>"1e12"&&(m=.5),T(n)>"1e12"&&(n=.5),m>0&&1>m&&(i=D(a,b,c,d,e,f,g,h,m),p.push(i.x),o.push(i.y)),n>0&&1>n&&(i=D(a,b,c,d,e,f,g,h,n),p.push(i.x),o.push(i.y)),j=f-2*d+b-(h-2*f+d),k=2*(d-b)-2*(f-d),l=b-d,m=(-k+O.sqrt(k*k-4*j*l))/2/j,n=(-k-O.sqrt(k*k-4*j*l))/2/j,T(m)>"1e12"&&(m=.5),T(n)>"1e12"&&(n=.5),m>0&&1>m&&(i=D(a,b,c,d,e,f,g,h,m),p.push(i.x),o.push(i.y)),n>0&&1>n&&(i=D(a,b,c,d,e,f,g,h,n),p.push(i.x),o.push(i.y)),{min:{x:Q.apply(0,p),y:Q.apply(0,o)},max:{x:R.apply(0,p),y:R.apply(0,o)}}}function F(a,b){var d=!b&&c(a);if(!b&&d.curve)return f(d.curve);for(var e=z(a),g=b&&z(b),h={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},i={x:0,y:0,bx:0,by:0,X:0,Y:0,qx:null,qy:null},j=(function(a,b){var c,d;if(!a)return["C",b.x,b.y,b.x,b.y,b.x,b.y];switch(!(a[0]in{T:1,Q:1})&&(b.qx=b.qy=null),a[0]){case"M":b.X=a[1],b.Y=a[2];break;case"A":a=["C"].concat(C.apply(0,[b.x,b.y].concat(a.slice(1))));break;case"S":c=b.x+(b.x-(b.bx||b.x)),d=b.y+(b.y-(b.by||b.y)),a=["C",c,d].concat(a.slice(1));break;case"T":b.qx=b.x+(b.x-(b.qx||b.x)),b.qy=b.y+(b.y-(b.qy||b.y)),a=["C"].concat(B(b.x,b.y,b.qx,b.qy,a[1],a[2]));break;case"Q":b.qx=a[1],b.qy=a[2],a=["C"].concat(B(b.x,b.y,a[1],a[2],a[3],a[4]));break;case"L":a=["C"].concat(A(b.x,b.y,a[1],a[2]));break;case"H":a=["C"].concat(A(b.x,b.y,a[1],b.y));break;case"V":a=["C"].concat(A(b.x,b.y,b.x,a[1]));break;case"Z":a=["C"].concat(A(b.x,b.y,b.X,b.Y))}return a}),k=function(a,b){if(a[b].length>7){a[b].shift();for(var c=a[b];c.length;)a.splice(b++,0,["C"].concat(c.splice(0,6)));a.splice(b,1),n=R(e.length,g&&g.length||0)}},l=function(a,b,c,d,f){a&&b&&"M"==a[f][0]&&"M"!=b[f][0]&&(b.splice(f,0,["M",d.x,d.y]),c.bx=0,c.by=0,c.x=a[f][1],c.y=a[f][2],n=R(e.length,g&&g.length||0))},m=0,n=R(e.length,g&&g.length||0);n>m;m++){e[m]=j(e[m],h),k(e,m),g&&(g[m]=j(g[m],i)),g&&k(g,m),l(e,g,h,i,m),l(g,e,i,h,m);var o=e[m],p=g&&g[m],q=o.length,r=g&&p.length;h.x=o[q-2],h.y=o[q-1],h.bx=N(o[q-4])||h.x,h.by=N(o[q-3])||h.y,i.bx=g&&(N(p[r-4])||i.x),i.by=g&&(N(p[r-3])||i.y),i.x=g&&p[r-2],i.y=g&&p[r-1]}return g||(d.curve=f(e)),g?[e,g]:e}function G(a,b){if(!b)return a;var c,d,e,f,g,h,i;for(a=F(a),e=0,g=a.length;g>e;e++)for(i=a[e],f=1,h=i.length;h>f;f+=2)c=b.x(i[f],i[f+1]),d=b.y(i[f],i[f+1]),i[f]=c,i[f+1]=d;return a}function H(a,b){for(var c=[],d=0,e=a.length;e-2*!b>d;d+=2){var f=[{x:+a[d-2],y:+a[d-1]},{x:+a[d],y:+a[d+1]},{x:+a[d+2],y:+a[d+3]},{x:+a[d+4],y:+a[d+5]}];b?d?e-4==d?f[3]={x:+a[0],y:+a[1]}:e-2==d&&(f[2]={x:+a[0],y:+a[1]},f[3]={x:+a[2],y:+a[3]}):f[0]={x:+a[e-2],y:+a[e-1]}:e-4==d?f[3]=f[2]:d||(f[0]={x:+a[d],y:+a[d+1]}),c.push(["C",(-f[0].x+6*f[1].x+f[2].x)/6,(-f[0].y+6*f[1].y+f[2].y)/6,(f[1].x+6*f[2].x-f[3].x)/6,(f[1].y+6*f[2].y-f[3].y)/6,f[2].x,f[2].y])}return c}var I=b.prototype,J=a.is,K=a._.clone,L="hasOwnProperty",M=/,?([a-z]),?/gi,N=parseFloat,O=Math,P=O.PI,Q=O.min,R=O.max,S=O.pow,T=O.abs,U=h(1),V=h(),W=h(0,1),X=a._unit2px,Y={path:function(a){return a.attr("path")},circle:function(a){var b=X(a);return x(b.cx,b.cy,b.r)},ellipse:function(a){var b=X(a);return x(b.cx,b.cy,b.rx,b.ry)},rect:function(a){var b=X(a);return w(b.x,b.y,b.width,b.height,b.rx,b.ry)},image:function(a){var b=X(a);return w(b.x,b.y,b.width,b.height)},text:function(a){var b=a.node.getBBox();return w(b.x,b.y,b.width,b.height)},g:function(a){var b=a.node.getBBox();return w(b.x,b.y,b.width,b.height)},symbol:function(a){var b=a.getBBox();return w(b.x,b.y,b.width,b.height)},polyline:function(a){return"M"+a.attr("points")},polygon:function(a){return"M"+a.attr("points")+"z"}};a.path=c,a.path.getTotalLength=U,a.path.getPointAtLength=V,a.path.getSubpath=function(a,b,c){if(this.getTotalLength(a)-c<1e-6)return W(a,b).end;var d=W(a,c,1);return b?W(d,b).end:d},I.getTotalLength=function(){return this.node.getTotalLength?this.node.getTotalLength():void 0},I.getPointAtLength=function(a){return V(this.attr("d"),a)},I.getSubpath=function(b,c){return a.path.getSubpath(this.attr("d"),b,c)},a._.box=d,a.path.findDotsAtSegment=i,a.path.bezierBBox=j,a.path.isPointInsideBBox=k,a.path.isBBoxIntersect=l,a.path.intersection=r,a.path.intersectionNumber=s,a.path.isPointInside=u,a.path.getBBox=v,a.path.get=Y,a.path.toRelative=y,a.path.toAbsolute=z,a.path.toCubic=F,a.path.map=G,a.path.toString=e,a.path.clone=f}),d.plugin(function(a){var b=Math.max,c=Math.min,d=function(a){if(this.items=[],this.length=0,this.type="set",a)for(var b=0,c=a.length;c>b;b++)a[b]&&(this[this.items.length]=this.items[this.items.length]=a[b],this.length++)},e=d.prototype;e.push=function(){for(var a,b,c=0,d=arguments.length;d>c;c++)a=arguments[c],a&&(b=this.items.length,this[b]=this.items[b]=a,this.length++);return this},e.pop=function(){return this.length&&delete this[this.length--],this.items.pop()},e.forEach=function(a,b){for(var c=0,d=this.items.length;d>c;c++)if(a.call(b,this.items[c],c)===!1)return this;return this},e.attr=function(a){for(var b=0,c=this.items.length;c>b;b++)this.items[b].attr(a);return this},e.clear=function(){for(;this.length;)this.pop()},e.splice=function(a,e){a=0>a?b(this.length+a,0):a,e=b(0,c(this.length-a,e));var f,g=[],h=[],i=[];for(f=2;ff;f++)h.push(this[a+f]);for(;ff?i[f]:g[f-j];for(f=this.items.length=this.length-=e-j;this[f];)delete this[f++];return new d(h)},e.exclude=function(a){for(var b=0,c=this.length;c>b;b++)if(this[b]==a)return this.splice(b,1),!0;return!1},e.insertAfter=function(a){for(var b=this.items.length;b--;)this.items[b].insertAfter(a);return this},e.getBBox=function(){for(var a=[],d=[],e=[],f=[],g=this.items.length;g--;)if(!this.items[g].removed){var h=this.items[g].getBBox();a.push(h.x),d.push(h.y),e.push(h.x+h.width),f.push(h.y+h.height)}return a=c.apply(0,a),d=c.apply(0,d),e=b.apply(0,e),f=b.apply(0,f),{x:a,y:d,x2:e,y2:f,width:e-a,height:f-d,cx:a+(e-a)/2,cy:d+(f-d)/2}},e.clone=function(a){a=new d;for(var b=0,c=this.items.length;c>b;b++)a.push(this.items[b].clone());return a},e.toString=function(){return"Snap‘s set"},e.type="set",a.set=function(){var a=new d;return arguments.length&&a.push.apply(a,Array.prototype.slice.call(arguments,0)),a}}),d.plugin(function(a,b){function c(a){var b=a[0];switch(b.toLowerCase()){case"t":return[b,0,0];case"m":return[b,1,0,0,1,0,0];case"r":return 4==a.length?[b,0,a[2],a[3]]:[b,0];case"s":return 5==a.length?[b,1,1,a[3],a[4]]:3==a.length?[b,1,1]:[b,1]}}function d(b,d,e){d=l(d).replace(/\.{3}|\u2026/g,b),b=a.parseTransformString(b)||[],d=a.parseTransformString(d)||[];for(var f,g,j,k,m=Math.max(b.length,d.length),n=[],o=[],p=0;m>p;p++){if(j=b[p]||c(d[p]),k=d[p]||c(j),j[0]!=k[0]||"r"==j[0].toLowerCase()&&(j[2]!=k[2]||j[3]!=k[3])||"s"==j[0].toLowerCase()&&(j[3]!=k[3]||j[4]!=k[4])){b=a._.transform2matrix(b,e()),d=a._.transform2matrix(d,e()),n=[["m",b.a,b.b,b.c,b.d,b.e,b.f]],o=[["m",d.a,d.b,d.c,d.d,d.e,d.f]];break}for(n[p]=[],o[p]=[],f=0,g=Math.max(j.length,k.length);g>f;f++)f in j&&(n[p][f]=j[f]),f in k&&(o[p][f]=k[f])}return{from:i(n),to:i(o),f:h(n)}}function e(a){return a}function f(a){return function(b){return+b.toFixed(3)+a}}function g(b){return a.rgb(b[0],b[1],b[2])}function h(a){var b,c,d,e,f,g,h=0,i=[];for(b=0,c=a.length;c>b;b++){for(f="[",g=['"'+a[b][0]+'"'],d=1,e=a[b].length;e>d;d++)g[d]="val["+h++ +"]";f+=g+"]",i[b]=f}return Function("val","return Snap.path.toString.call(["+i+"])")}function i(a){for(var b=[],c=0,d=a.length;d>c;c++)for(var e=1,f=a[c].length;f>e;e++)b.push(a[c][e]);return b}var j={},k=/[a-z]+$/i,l=String;j.stroke=j.fill="colour",b.prototype.equal=function(b,c){var m,n,o=l(this.attr(b)||""),p=this;if(o==+o&&c==+c)return{from:+o,to:+c,f:e};if("colour"==j[b])return m=a.color(o),n=a.color(c),{from:[m.r,m.g,m.b,m.opacity],to:[n.r,n.g,n.b,n.opacity],f:g};if("transform"==b||"gradientTransform"==b||"patternTransform"==b)return d(o,c,function(){return p.getBBox(1)});if("d"==b||"path"==b)return m=a.path.toCubic(o,c),{from:i(m[0]),to:i(m[1]),f:h(m[0])};var q=o.match(k),r=c.match(k);return q&&q==r?{from:parseFloat(o),to:parseFloat(c),f:f(q)}:{from:this.asPX(b),to:this.asPX(b,c),f:e}}}),d.plugin(function(a,c,d,e){for(var f=c.prototype,g="hasOwnProperty",h=("createTouch"in e.doc),i=["click","dblclick","mousedown","mousemove","mouseout","mouseover","mouseup","touchstart","touchmove","touchend","touchcancel"],j={mousedown:"touchstart",mousemove:"touchmove",mouseup:"touchend"},k=function(a){var b="y"==a?"scrollTop":"scrollLeft";
     return e.doc.documentElement[b]||e.doc.body[b]},l=function(){this.returnValue=!1},m=function(){return this.originalEvent.preventDefault()},n=function(){this.cancelBubble=!0},o=function(){return this.originalEvent.stopPropagation()},p=function(){return e.doc.addEventListener?function(a,b,c,d){var e=h&&j[b]?j[b]:b,f=function(e){var f=k("y"),i=k("x"),l=e.clientX+i,n=e.clientY+f;if(h&&j[g](b))for(var p=0,q=e.targetTouches&&e.targetTouches.length;q>p;p++)if(e.targetTouches[p].target==a){var r=e;e=e.targetTouches[p],e.originalEvent=r,e.preventDefault=m,e.stopPropagation=o;break}return c.call(d,e,l,n)};return a.addEventListener(e,f,!1),function(){return a.removeEventListener(e,f,!1),!0}}:e.doc.attachEvent?function(a,b,c,d){var f=function(a){a=a||e.win.event;var b=k("y"),f=k("x"),g=a.clientX+f,h=a.clientY+b;return a.preventDefault=a.preventDefault||l,a.stopPropagation=a.stopPropagation||n,c.call(d,a,g,h)};a.attachEvent("on"+b,f);var g=function(){return a.detachEvent("on"+b,f),!0};return g}:void 0}(),q=[],r=function(c){for(var d,e=c.clientX,f=c.clientY,g=k("y"),i=k("x"),j=q.length;j--;){if(d=q[j],h){for(var l,m=c.touches.length;m--;)if(l=c.touches[m],l.identifier==d.el._drag.id){e=l.clientX,f=l.clientY,(c.originalEvent?c.originalEvent:c).preventDefault();break}}else c.preventDefault();var n=d.el.node;a._.glob,n.nextSibling,n.parentNode,n.style.display,e+=i,f+=g,b("snap.drag.move."+d.el.id,d.move_scope||d.el,e-d.el._drag.x,f-d.el._drag.y,e,f,c)}},s=function(c){a.unmousemove(r).unmouseup(s);for(var d,e=q.length;e--;)d=q[e],d.el._drag={},b("snap.drag.end."+d.el.id,d.end_scope||d.start_scope||d.move_scope||d.el,c);q=[]},t=i.length;t--;)!function(b){a[b]=f[b]=function(c,d){return a.is(c,"function")&&(this.events=this.events||[],this.events.push({name:b,f:c,unbind:p(this.shape||this.node||e.doc,b,c,d||this)})),this},a["un"+b]=f["un"+b]=function(a){for(var c=this.events||[],d=c.length;d--;)if(c[d].name==b&&(c[d].f==a||!a))return c[d].unbind(),c.splice(d,1),!c.length&&delete this.events,this;return this}}(i[t]);f.hover=function(a,b,c,d){return this.mouseover(a,c).mouseout(b,d||c)},f.unhover=function(a,b){return this.unmouseover(a).unmouseout(b)};var u=[];f.drag=function(c,d,e,f,g,h){function i(i){(i.originalEvent||i).preventDefault();var j=k("y"),l=k("x");this._drag.x=i.clientX+l,this._drag.y=i.clientY+j,this._drag.id=i.identifier,!q.length&&a.mousemove(r).mouseup(s),q.push({el:this,move_scope:f,start_scope:g,end_scope:h}),d&&b.on("snap.drag.start."+this.id,d),c&&b.on("snap.drag.move."+this.id,c),e&&b.on("snap.drag.end."+this.id,e),b("snap.drag.start."+this.id,g||f||this,i.clientX+l,i.clientY+j,i)}if(!arguments.length){var j;return this.drag(function(a,b){this.attr({transform:j+(j?"T":"t")+[a,b]})},function(){j=this.transform().local})}return this._drag={},u.push({el:this,start:i}),this.mousedown(i),this},f.undrag=function(){for(var c=u.length;c--;)u[c].el==this&&(this.unmousedown(u[c].start),u.splice(c,1),b.unbind("snap.drag.*."+this.id));return!u.length&&a.unmousemove(r).unmouseup(s),this}}),d.plugin(function(a,c,d){var e=(c.prototype,d.prototype),f=/^\s*url\((.+)\)/,g=String,h=a._.$;a.filter={},e.filter=function(b){var d=this;"svg"!=d.type&&(d=d.paper);var e=a.parse(g(b)),f=a._.id(),i=d.node.offsetWidth,j=d.node.offsetHeight,k=h("filter");return h(k,{id:f,filterUnits:"userSpaceOnUse",x:0,y:0,width:i,height:j}),k.appendChild(e.node),d.defs.appendChild(k),new c(k)},b.on("snap.util.getattr.filter",function(){b.stop();var c=h(this.node,"filter");if(c){var d=g(c).match(f);return d&&a.select(d[1])}}),b.on("snap.util.attr.filter",function(a){if(a instanceof c&&"filter"==a.type){b.stop();var d=a.node.id;d||(h(a.node,{id:a.id}),d=a.id),h(this.node,{filter:"url(#"+d+")"})}a&&"none"!=a||(b.stop(),this.node.removeAttribute("filter"))}),a.filter.blur=function(b,c){null==b&&(b=2);var d=null==c?b:[b,c];return a.format('',{def:d})},a.filter.blur.toString=function(){return this()},a.filter.shadow=function(b,c,d,e){return e=e||"#000",null==d&&(d=4),"string"==typeof d&&(e=d,d=4),null==b&&(b=0,c=2),null==c&&(c=b),e=a.color(e),a.format('',{color:e,dx:b,dy:c,blur:d})},a.filter.shadow.toString=function(){return this()},a.filter.grayscale=function(b){return null==b&&(b=1),a.format('',{a:.2126+.7874*(1-b),b:.7152-.7152*(1-b),c:.0722-.0722*(1-b),d:.2126-.2126*(1-b),e:.7152+.2848*(1-b),f:.0722-.0722*(1-b),g:.2126-.2126*(1-b),h:.0722+.9278*(1-b)})},a.filter.grayscale.toString=function(){return this()},a.filter.sepia=function(b){return null==b&&(b=1),a.format('',{a:.393+.607*(1-b),b:.769-.769*(1-b),c:.189-.189*(1-b),d:.349-.349*(1-b),e:.686+.314*(1-b),f:.168-.168*(1-b),g:.272-.272*(1-b),h:.534-.534*(1-b),i:.131+.869*(1-b)})},a.filter.sepia.toString=function(){return this()},a.filter.saturate=function(b){return null==b&&(b=1),a.format('',{amount:1-b})},a.filter.saturate.toString=function(){return this()},a.filter.hueRotate=function(b){return b=b||0,a.format('',{angle:b})},a.filter.hueRotate.toString=function(){return this()},a.filter.invert=function(b){return null==b&&(b=1),a.format('',{amount:b,amount2:1-b})},a.filter.invert.toString=function(){return this()},a.filter.brightness=function(b){return null==b&&(b=1),a.format('',{amount:b})},a.filter.brightness.toString=function(){return this()},a.filter.contrast=function(b){return null==b&&(b=1),a.format('',{amount:b,amount2:.5-b/2})},a.filter.contrast.toString=function(){return this()}}),d});
    \ No newline at end of file
    diff --git a/dist/snap.svg.js b/dist/snap.svg.js
    index e124708..ed1bb83 100644
    --- a/dist/snap.svg.js
    +++ b/dist/snap.svg.js
    @@ -14,7 +14,7 @@
     // See the License for the specific language governing permissions and
     // limitations under the License.
     // 
    -// build: 2013-10-06
    +// build: 2013-10-14
     // Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
     // 
     // Licensed under the Apache License, Version 2.0 (the "License");
    @@ -524,30 +524,31 @@ var mina = (function (eve) {
             }
             len && requestAnimFrame(frame);
         },
    +    // SIERRA Unfamiliar with the word _slave_ in this context. Also, I don't know what _gereal_ means. Do you mean _general_?
         /*\
          * mina
          [ method ]
          **
    -     * Generic animation of numbers.
    +     * Generic animation of numbers
          **
    -     - a (number) start “slave” number
    -     - A (number) end “slave” number
    -     - b (number) start “master” number (start time in gereal case)
    -     - B (number) end “master” number (end time in gereal case)
    -     - get (function) getter of “master” number (see @mina.time)
    -     - set (function) setter of “slave” number
    +     - a (number) start _slave_ number
    +     - A (number) end _slave_ number
    +     - b (number) start _master_ number (start time in gereal case)
    +     - B (number) end _master_ number (end time in gereal case)
    +     - get (function) getter of _master_ number (see @mina.time)
    +     - set (function) setter of _slave_ number
          - easing (function) #optional easing function, default is @mina.linear
          = (object) animation descriptor
          o {
          o         id (string) animation id,
    -     o         start (number) start “slave” number,
    -     o         end (number) end “slave” number,
    -     o         b (number) start “master” number,
    +     o         start (number) start _slave_ number,
    +     o         end (number) end _slave_ number,
    +     o         b (number) start _master_ number,
          o         s (number) animation status (0..1),
          o         dur (number) animation duration,
          o         spd (number) animation speed,
    -     o         get (function) getter of “master” number (see @mina.time),
    -     o         set (function) setter of “slave” number,
    +     o         get (function) getter of _master_ number (see @mina.time),
    +     o         set (function) setter of _slave_ number,
          o         easing (function) easing function, default is @mina.linear,
          o         status (function) status getter/setter,
          o         speed (function) speed getter/setter,
    @@ -589,7 +590,7 @@ var mina = (function (eve) {
          * mina.time
          [ method ]
          **
    -     * Returns current time. Equal to
    +     * Returns the current time. Equivalent to:
          | function () {
          |     return (new Date).getTime();
          | }
    @@ -599,8 +600,8 @@ var mina = (function (eve) {
          * mina.getById
          [ method ]
          **
    -     * Returns animation by it’s id.
    -     - id (string) animation’s id
    +     * Returns an animation by its id
    +     - id (string) animation's id
          = (object) See @mina
         \*/
         mina.getById = function (id) {
    @@ -611,7 +612,7 @@ var mina = (function (eve) {
          * mina.linear
          [ method ]
          **
    -     * Default linear easing.
    +     * Default linear easing
          - n (number) input 0..1
          = (number) output 0..1
         \*/
    @@ -622,7 +623,7 @@ var mina = (function (eve) {
          * mina.easeout
          [ method ]
          **
    -     * Easeout easing.
    +     * Easeout easing
          - n (number) input 0..1
          = (number) output 0..1
         \*/
    @@ -633,7 +634,7 @@ var mina = (function (eve) {
          * mina.easein
          [ method ]
          **
    -     * Easein easing.
    +     * Easein easing
          - n (number) input 0..1
          = (number) output 0..1
         \*/
    @@ -644,7 +645,7 @@ var mina = (function (eve) {
          * mina.easeinout
          [ method ]
          **
    -     * Easeinout easing.
    +     * Easeinout easing
          - n (number) input 0..1
          = (number) output 0..1
         \*/
    @@ -668,7 +669,7 @@ var mina = (function (eve) {
          * mina.backin
          [ method ]
          **
    -     * Backin easing.
    +     * Backin easing
          - n (number) input 0..1
          = (number) output 0..1
         \*/
    @@ -683,7 +684,7 @@ var mina = (function (eve) {
          * mina.backout
          [ method ]
          **
    -     * Backout easing.
    +     * Backout easing
          - n (number) input 0..1
          = (number) output 0..1
         \*/
    @@ -699,7 +700,7 @@ var mina = (function (eve) {
          * mina.elastic
          [ method ]
          **
    -     * Elastic easing.
    +     * Elastic easing
          - n (number) input 0..1
          = (number) output 0..1
         \*/
    @@ -714,7 +715,7 @@ var mina = (function (eve) {
          * mina.bounce
          [ method ]
          **
    -     * Bounce easing.
    +     * Bounce easing
          - n (number) input 0..1
          = (number) output 0..1
         \*/
    @@ -1110,16 +1111,17 @@ var mina = (function (eve) {
     
     var Snap = (function() {
     Snap.version = "0.0.1";
    +// SIERRA: this method appears to be missing from HTML output
     /*\
      * Snap
      [ method ]
      **
    - * Creates drawing surface or wraps existing SVG element.
    + * Creates a drawing surface or wraps existing SVG element
      **
      - width (number|string) width of surface
      - height (number|string) height of surface
      * or
    - - dom (SVGElement) element to be wrapped into Snap structure
    + - DOM (SVGElement) element to be wrapped into Snap structure
      * or
      - query (string) CSS query selector
      = (object) @Element
    @@ -1249,13 +1251,13 @@ function is(o, type) {
      * Snap.format
      [ method ]
      **
    - * Replaces construction of type “`{}`” to the corresponding argument.
    + * Replaces construction of type `{}` to the corresponding argument
      **
      - token (string) string to format
    - - json (object) object which properties will be used as a replacement
    - = (string) formated string
    + - json (object) object which properties are used as a replacement
    + = (string) formatted string
      > Usage
    - | // this will draw a rectangular shape equivalent to "M10,20h40v50h-40z"
    + | // this draws a rectangular shape equivalent to "M10,20h40v50h-40z"
      | paper.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']}z", {
      |     x: 10,
      |     y: 20,
    @@ -1372,7 +1374,7 @@ function x_y_w_h() {
      **
      * Transform angle to radians
      - deg (number) angle in degrees
    - = (number) angle in radians.
    + = (number) angle in radians
     \*/
     Snap.rad = rad;
     /*\
    @@ -1380,15 +1382,16 @@ Snap.rad = rad;
      [ method ]
      **
      * Transform angle to degrees
    - - deg (number) angle in radians
    - = (number) angle in degrees.
    + - rad (number) angle in radians
    + = (number) angle in degrees
     \*/
     Snap.deg = deg;
    +// SIERRA for which point is the angle calculated?
     /*\
      * Snap.angle
      [ method ]
      **
    - * Returns angle between two or three points.
    + * Returns an angle between two or three points
      > Parameters
      - x1 (number) x coord of first point
      - y1 (number) y coord of first point
    @@ -1396,28 +1399,28 @@ Snap.deg = deg;
      - y2 (number) y coord of second point
      - x3 (number) #optional x coord of third point
      - y3 (number) #optional y coord of third point
    - = (number) angle in degrees.
    + = (number) angle in degrees
     \*/
     Snap.angle = angle;
     /*\
      * Snap.is
      [ method ]
      **
    - * Handfull replacement for `typeof` operator.
    + * Handy replacement for the `typeof` operator
      - o (…) any object or primitive
    - - type (string) name of the type, i.e. “string”, “function”, “number”, etc.
    - = (boolean) is given value is of given type
    + - type (string) name of the type, e.g., `string`, `function`, `number`, etc.
    + = (boolean) `true` if given value is of given type
     \*/
     Snap.is = is;
     /*\
      * Snap.snapTo
      [ method ]
      **
    - * Snaps given value to given grid.
    + * Snaps given value to given grid
      - values (array|number) given array of values or step of the grid
      - value (number) value to adjust
    - - tolerance (number) #optional tolerance for snapping. Default is `10`.
    - = (number) adjusted value.
    + - tolerance (number) #optional maximum distance to the target value that would trigger the snap. Default is `10`.
    + = (number) adjusted value
     \*/
     Snap.snapTo = function (values, value, tolerance) {
         tolerance = is(tolerance, "finite") ? tolerance : 10;
    @@ -1471,7 +1474,7 @@ function Matrix(a, b, c, d, e, f) {
          * Matrix.add
          [ method ]
          **
    -     * Adds given matrix to existing one.
    +     * Adds the given matrix to existing one
          - a (number)
          - b (number)
          - c (number)
    @@ -1508,11 +1511,12 @@ function Matrix(a, b, c, d, e, f) {
             this.f = out[1][2];
             return this;
         };
    +// SIERRA Matrix.invert(): Unclear what it means to invert a matrix.
         /*\
          * Matrix.invert
          [ method ]
          **
    -     * Returns inverted version of the matrix
    +     * Returns an inverted version of the matrix
          = (object) @Matrix
         \*/
         matrixproto.invert = function () {
    @@ -1524,7 +1528,7 @@ function Matrix(a, b, c, d, e, f) {
          * Matrix.clone
          [ method ]
          **
    -     * Returns copy of the matrix
    +     * Returns a copy of the matrix
          = (object) @Matrix
         \*/
         matrixproto.clone = function () {
    @@ -1535,21 +1539,22 @@ function Matrix(a, b, c, d, e, f) {
          [ method ]
          **
          * Translate the matrix
    -     - x (number)
    -     - y (number)
    +     - x (number) horizontal offset distance
    +     - y (number) vertical offset distance
         \*/
         matrixproto.translate = function (x, y) {
             return this.add(1, 0, 0, 1, x, y);
         };
    +    // SIERRA: do cx/cy default to the center point, as in CSS? If so, Snap appears to resolve important discrepancies between how transforms behave in SVG & CSS.
         /*\
          * Matrix.scale
          [ method ]
          **
          * Scales the matrix
    -     - x (number)
    -     - y (number) #optional
    -     - cx (number) #optional
    -     - cy (number) #optional
    +     - x (number) amount to be scaled, with `1` resulting in no change
    +     - y (number) #optional amount to scale along the vertical axis. (Otherwise `x` applies to both axes.)
    +     - cx (number) #optional horizontal origin point from which to scale
    +     - cy (number) #optional vertical origin point from which to scale
         \*/
         matrixproto.scale = function (x, y, cx, cy) {
             y == null && (y = x);
    @@ -1563,9 +1568,9 @@ function Matrix(a, b, c, d, e, f) {
          [ method ]
          **
          * Rotates the matrix
    -     - a (number)
    -     - x (number)
    -     - y (number)
    +     - a (number) angle of rotation, in degrees
    +     - x (number) horizontal origin point from which to rotate
    +     - y (number) vertical origin point from which to rotate
         \*/
         matrixproto.rotate = function (a, x, y) {
             a = rad(a);
    @@ -1580,7 +1585,7 @@ function Matrix(a, b, c, d, e, f) {
          * Matrix.x
          [ method ]
          **
    -     * Return x coordinate for given point after transformation described by the matrix. See also @Matrix.y
    +     * Returns x coordinate for given point after transformation described by the matrix. See also @Matrix.y
          - x (number)
          - y (number)
          = (number) x
    @@ -1592,7 +1597,7 @@ function Matrix(a, b, c, d, e, f) {
          * Matrix.y
          [ method ]
          **
    -     * Return y coordinate for given point after transformation described by the matrix. See also @Matrix.x
    +     * Returns y coordinate for given point after transformation described by the matrix. See also @Matrix.x
          - x (number)
          - y (number)
          = (number) y
    @@ -1617,6 +1622,9 @@ function Matrix(a, b, c, d, e, f) {
             a[0] && (a[0] /= mag);
             a[1] && (a[1] /= mag);
         }
    +// SIERRA Matrix.split(): HTML formatting for the return value is scrambled. It should appear _Returns: {OBJECT} in format:..._
    +// SIERRA Matrix.split(): the _shear_ parameter needs to be detailed. Is it an angle? What does it affect?
    +// SIERRA Matrix.split(): The idea of _simple_ transforms needs to be detailed and contrasted with any alternatives.
         /*\
          * Matrix.split
          [ method ]
    @@ -1666,11 +1674,12 @@ function Matrix(a, b, c, d, e, f) {
             out.noRotation = !+out.shear.toFixed(9) && !out.rotate;
             return out;
         };
    +// SIERRA Matrix.toTransformString(): The format of the string needs to be detailed.
         /*\
          * Matrix.toTransformString
          [ method ]
          **
    -     * Return transform string that represents given matrix
    +     * Returns transform string that represents given matrix
          = (string) transform string
         \*/
         matrixproto.toTransformString = function (shorter) {
    @@ -1687,13 +1696,14 @@ function Matrix(a, b, c, d, e, f) {
             }
         };
     })(Matrix.prototype);
    +// SIERRA Unclear the difference between the two matrix formats ("parameters" vs svgMatrix). See my comment about Element.matrix().
     /*\
      * Snap.Matrix
      [ method ]
      **
      * Utility method
      **
    - * Returns matrix based on given parameters.
    + * Returns a matrix based on the given parameters
      - a (number)
      - b (number)
      - c (number)
    @@ -1710,33 +1720,33 @@ Snap.Matrix = Matrix;
      * Snap.getRGB
      [ method ]
      **
    - * Parses colour string as RGB object
    - - colour (string) colour string in one of formats:
    + * Parses color string as RGB object
    + - color (string) color string in one of the following formats:
      # 
      - #
    • Colour name (“red”, “green”, “cornflowerblue”, etc)
    • - #
    • #••• — shortened HTML colour: (“#000”, “#fc0”, etc)
    • - #
    • #•••••• — full length HTML colour: (“#000000”, “#bd2300”)
    • - #
    • rgb(•••, •••, •••) — red, green and blue channels values: (“rgb(200, 100, 0)”)
    • + #
    • Color name (red, green, cornflowerblue, etc)
    • + #
    • #••• — shortened HTML color: (#000, #fc0, etc.)
    • + #
    • #•••••• — full length HTML color: (#000000, #bd2300)
    • + #
    • rgb(•••, •••, •••) — red, green and blue channels values: (rgb(200, 100, 0))
    • #
    • rgba(•••, •••, •••, •••) — also with opacity
    • - #
    • rgb(•••%, •••%, •••%) — same as above, but in %: (“rgb(100%, 175%, 0%)”)
    • + #
    • rgb(•••%, •••%, •••%) — same as above, but in %: (rgb(100%, 175%, 0%))
    • #
    • rgba(•••%, •••%, •••%, •••%) — also with opacity
    • - #
    • hsb(•••, •••, •••) — hue, saturation and brightness values: (“hsb(0.5, 0.25, 1)”)
    • + #
    • hsb(•••, •••, •••) — hue, saturation and brightness values: (hsb(0.5, 0.25, 1))
    • #
    • hsba(•••, •••, •••, •••) — also with opacity
    • #
    • hsb(•••%, •••%, •••%) — same as above, but in %
    • #
    • hsba(•••%, •••%, •••%, •••%) — also with opacity
    • - #
    • hsl(•••, •••, •••) — hue, saturation and luminosity values: (“hsb(0.5, 0.25, 0.5)”)
    • + #
    • hsl(•••, •••, •••) — hue, saturation and luminosity values: (hsb(0.5, 0.25, 0.5))
    • #
    • hsla(•••, •••, •••, •••) — also with opacity
    • #
    • hsl(•••%, •••%, •••%) — same as above, but in %
    • #
    • hsla(•••%, •••%, •••%, •••%) — also with opacity
    • #
    * Note that `%` can be used any time: `rgb(20%, 255, 50%)`. - = (object) RGB object in format: + = (object) RGB object in the following format: o { o r (number) red, o g (number) green, - o b (number) blue + o b (number) blue, o hex (string) color in HTML/CSS format: #••••••, - o error (boolean) true if string cant be parsed + o error (boolean) true if string can't be parsed o } \*/ Snap.getRGB = cacher(function (colour) { @@ -1817,15 +1827,16 @@ Snap.getRGB = cacher(function (colour) { } return {r: -1, g: -1, b: -1, hex: "none", error: 1, toString: rgbtoString}; }, Snap); +// SIERRA It seems odd that the following 3 conversion methods are not expressed as .this2that(), like the others. /*\ * Snap.hsb [ method ] ** - * Converts HSB values to hex representation of the colour. + * Converts HSB values to a hex representation of the color - h (number) hue - s (number) saturation - b (number) value or brightness - = (string) hex representation of the colour. + = (string) hex representation of the color \*/ Snap.hsb = cacher(function (h, s, b) { return Snap.hsb2rgb(h, s, b).hex; @@ -1834,11 +1845,11 @@ Snap.hsb = cacher(function (h, s, b) { * Snap.hsl [ method ] ** - * Converts HSL values to hex representation of the colour. + * Converts HSL values to a hex representation of the color - h (number) hue - s (number) saturation - l (number) luminosity - = (string) hex representation of the colour. + = (string) hex representation of the color \*/ Snap.hsl = cacher(function (h, s, l) { return Snap.hsl2rgb(h, s, l).hex; @@ -1847,11 +1858,11 @@ Snap.hsl = cacher(function (h, s, l) { * Snap.rgb [ method ] ** - * Converts RGB values to hex representation of the colour. + * Converts RGB values to a hex representation of the color - r (number) red - g (number) green - b (number) blue - = (string) hex representation of the colour. + = (string) hex representation of the color \*/ Snap.rgb = cacher(function (r, g, b, o) { if (is(o, "finite")) { @@ -1920,20 +1931,20 @@ packageRGB = function (r, g, b, o) { is(o, "finite") && (rgb.opacity = o); return rgb; }; - +// SIERRA Clarify if Snap does not support consolidated HSLA/RGBA colors. E.g., can you specify a semi-transparent value for Snap.filter.shadow()? /*\ * Snap.color [ method ] ** - * Parses the color string and returns object with all values for the given color. + * Parses the color string and returns an object featuring the color's component values - clr (string) color string in one of the supported formats (see @Snap.getRGB) - = (object) Combined RGB & HSB object in format: + = (object) Combined RGB/HSB object in the following format: o { o r (number) red, o g (number) green, o b (number) blue, o hex (string) color in HTML/CSS format: #••••••, - o error (boolean) `true` if string cant be parsed, + o error (boolean) `true` if string can't be parsed, o h (number) hue, o s (number) saturation, o v (number) value (brightness), @@ -1980,11 +1991,11 @@ Snap.color = function (clr) { * Snap.hsb2rgb [ method ] ** - * Converts HSB values to RGB object. + * Converts HSB values to an RGB object - h (number) hue - s (number) saturation - v (number) value or brightness - = (object) RGB object in format: + = (object) RGB object in the following format: o { o r (number) red, o g (number) green, @@ -2016,11 +2027,11 @@ Snap.hsb2rgb = function (h, s, v, o) { * Snap.hsl2rgb [ method ] ** - * Converts HSL values to RGB object. + * Converts HSL values to an RGB object - h (number) hue - s (number) saturation - l (number) luminosity - = (object) RGB object in format: + = (object) RGB object in the following format: o { o r (number) red, o g (number) green, @@ -2056,14 +2067,14 @@ Snap.hsl2rgb = function (h, s, l, o) { * Snap.rgb2hsb [ method ] ** - * Converts RGB values to HSB object. + * Converts RGB values to an HSB object - r (number) red - g (number) green - b (number) blue - = (object) HSB object in format: + = (object) HSB object in the following format: o { - o h (number) hue - o s (number) saturation + o h (number) hue, + o s (number) saturation, o b (number) brightness o } \*/ @@ -2089,14 +2100,14 @@ Snap.rgb2hsb = function (r, g, b) { * Snap.rgb2hsl [ method ] ** - * Converts RGB values to HSL object. + * Converts RGB values to an HSL object - r (number) red - g (number) green - b (number) blue - = (object) HSL object in format: + = (object) HSL object in the following format: o { - o h (number) hue - o s (number) saturation + o h (number) hue, + o s (number) saturation, o l (number) luminosity o } \*/ @@ -2123,15 +2134,16 @@ Snap.rgb2hsl = function (r, g, b) { }; // Transformations +// SIERRA Snap.parsePathString(): By _array of arrays,_ I assume you mean a format like this for two separate segments? [ ["M10,10","L90,90"], ["M90,10","L10,90"] ] Otherwise how is each command structured? /*\ * Snap.parsePathString [ method ] ** * Utility method ** - * Parses given path string into an array of arrays of path segments. - - pathString (string|array) path string or array of segments (in the last case it will be returned straight away) - = (array) array of segments. + * Parses given path string into an array of arrays of path segments + - pathString (string|array) path string or array of segments (in the last case it is returned straight away) + = (array) array of segments \*/ Snap.parsePathString = function (pathString) { if (!pathString) { @@ -2176,15 +2188,16 @@ Snap.parsePathString = function (pathString) { pth.arr = Snap.path.clone(data); return data; }; +// SIERRA Snap.parseTransformString(): I don't understand the string format. /*\ * Snap.parseTransformString [ method ] ** * Utility method ** - * Parses given path string into an array of transformations. - - TString (string|array) transform string or array of transformations (in the last case it will be returned straight away) - = (array) array of transformations. + * Parses given transform string into an array of transformations + - TString (string|array) transform string or array of transformations (in the last case it is returned straight away) + = (array) array of transformations \*/ var parseTransformString = Snap.parseTransformString = function (TString) { if (!TString) { @@ -2449,9 +2462,9 @@ function unit2px(el, name, value) { * Snap.select [ method ] ** - * Wraps DOM element specified by CSS selector as @Element + * Wraps a DOM element specified by CSS selector as @Element - query (string) CSS selector of the element - = (Element) + = (Element) the current element \*/ Snap.select = function (query) { return wrap(glob.doc.querySelector(query)); @@ -2462,7 +2475,7 @@ Snap.select = function (query) { ** * Wraps DOM elements specified by CSS selector as set or array of @Element - query (string) CSS selector of the element - = (Element) + = (Element) the current element \*/ Snap.selectAll = function (query) { var nodelist = glob.doc.querySelectorAll(query), @@ -2538,16 +2551,17 @@ function arrayFirstValue(arr) { } } (function (elproto) { + // SIERRA Element.attr(): There appear to be two possible return values, one of which is blank. (Search the doc for _Returns:_ to identify problems.) /*\ * Element.attr [ method ] ** * Gets or sets given attributes of the element ** - - params (object) key-value pairs of attributes you want to set + - params (object) contains key-value pairs of attributes you want to set * or - param (string) name of the attribute - = (Element) + = (Element) the current element * or = (string) value of attribute > Usage @@ -2557,7 +2571,7 @@ function arrayFirstValue(arr) { | strokeWidth: 2, // CamelCase... | "fill-opacity": 0.5 // or dash-separated names | }); - | console.log(el.attr("fill")); // “#fc0” + | console.log(el.attr("fill")); // #fc0 \*/ elproto.attr = function (params, value) { var el = this, @@ -2581,11 +2595,13 @@ function arrayFirstValue(arr) { } return el; }; +// SIERRA Element.getBBox(): Unclear why you would want to express the dimension of the box as a path. +// SIERRA Element.getBBox(): Unclear why you would want to use r0/r1/r2. Also, basic definitions: wouldn't the _smallest circle that can be enclosed_ be a zero-radius point? /*\ * Element.getBBox [ method ] ** - * Returns bounding box descriptor for the given element. + * Returns the bounding box descriptor for the given element ** = (object) bounding box descriptor: o { @@ -2594,16 +2610,16 @@ function arrayFirstValue(arr) { o h: (number) height, o height: (number) height, o path: (string) path command for the box, - o r0: (number) radius of the circle that will enclose the box, + o r0: (number) radius of a circle that fully encloses the box, o r1: (number) radius of the smallest circle that can be enclosed, - o r2: (number) radius of the biggest circle that can be enclosed, + o r2: (number) radius of the largest circle that can be enclosed, o vb: (string) box as a viewbox command, o w: (number) width, o width: (number) width, o x2: (number) x of the right side, o x: (number) x of the left side, - o y2: (number) y of the right side, - o y: (number) y of the left side + o y2: (number) y of the bottom edge, + o y: (number) y of the top edge o } \*/ elproto.getBBox = function (isWithoutTransform) { @@ -2638,6 +2654,9 @@ function arrayFirstValue(arr) { var propString = function () { return this.local; }; +// SIERRA Element.transform(): seems to allow two return values, one of which (_Element_) is undefined. +// SIERRA Element.transform(): if this only accepts one argument, it's unclear how it can both _get_ and _set_ a transform. +// SIERRA Element.transform(): Unclear how Snap transform string format differs from SVG's. /*\ * Element.transform [ method ] @@ -2645,7 +2664,7 @@ function arrayFirstValue(arr) { * Gets or sets transformation of the element ** - tstr (string) transform string in Snap or SVG format - = (Element) + = (Element) the current element * or = (object) transformation descriptor: o { @@ -2696,9 +2715,9 @@ function arrayFirstValue(arr) { * Element.parent [ method ] ** - * Returns parent of the element + * Returns the element's parent ** - = (Element) parent + = (Element) the parent element \*/ elproto.parent = function () { return wrap(this.node.parentNode); @@ -2707,16 +2726,16 @@ function arrayFirstValue(arr) { * Element.append [ method ] ** - * Appends given element to current one. + * Appends the given element to current one ** - el (Element|Set) element to append - = (Element) parent + = (Element) the parent element \*/ /*\ * Element.add [ method ] ** - * See @Element.append. + * See @Element.append \*/ elproto.append = elproto.add = function (el) { if (el.type == "set") { @@ -2735,10 +2754,10 @@ function arrayFirstValue(arr) { * Element.prepend [ method ] ** - * Prepends given element to current one. + * Prepends the given element to the current one ** - el (Element) element to prepend - = (Element) parent + = (Element) the parent element \*/ elproto.prepend = function (el) { el = wrap(el); @@ -2750,10 +2769,10 @@ function arrayFirstValue(arr) { * Element.before [ method ] ** - * Inserts given element before the current one. + * Inserts given element before the current one ** - el (Element) element to insert - = (Element) parent + = (Element) the parent element \*/ // TODO make it work for sets too elproto.before = function (el) { @@ -2766,10 +2785,10 @@ function arrayFirstValue(arr) { * Element.after [ method ] ** - * Inserts given element after the current one. + * Inserts given element after the current one ** - el (Element) element to insert - = (Element) parent + = (Element) the parent element \*/ elproto.after = function (el) { el = wrap(el); @@ -2781,10 +2800,10 @@ function arrayFirstValue(arr) { * Element.insertBefore [ method ] ** - * Inserts the element after the given one. + * Inserts the element after the given one ** - el (Element) element next to whom insert to - = (Element) parent + = (Element) the parent element \*/ elproto.insertBefore = function (el) { el = wrap(el); @@ -2796,10 +2815,10 @@ function arrayFirstValue(arr) { * Element.insertAfter [ method ] ** - * Inserts the element after the given one. + * Inserts the element after the given one ** - el (Element) element next to whom insert to - = (Element) parent + = (Element) the parent element \*/ elproto.insertAfter = function (el) { el = wrap(el); @@ -2812,7 +2831,7 @@ function arrayFirstValue(arr) { [ method ] ** * Removes element from the DOM - = (Element) removed element + = (Element) the detached element \*/ elproto.remove = function () { this.node.parentNode && this.node.parentNode.removeChild(this.node); @@ -2824,7 +2843,7 @@ function arrayFirstValue(arr) { * Element.select [ method ] ** - * Applies CSS selector with the element as a parent and returns the result as an @Element. + * Gathers the nested @Element matching the given set of CSS selectors ** - query (string) CSS selector = (Element) result of query selection @@ -2836,7 +2855,7 @@ function arrayFirstValue(arr) { * Element.selectAll [ method ] ** - * Applies CSS selector with the element as a parent and returns the result as a set or array of elements. + * Gathers nested @Element objects matching the given set of CSS selectors ** - query (string) CSS selector = (Set|array) result of query selection @@ -2853,7 +2872,7 @@ function arrayFirstValue(arr) { * Element.asPX [ method ] ** - * Return given attribute of the element as a `px` value. (Not %, em, etc) + * Returns given attribute of the element as a `px` value (not %, em, etc.) ** - attr (string) attribute name - value (string) #optional attribute value @@ -2865,13 +2884,14 @@ function arrayFirstValue(arr) { } return unit2px(this, attr, value); }; + // SIERRA Element.use(): I suggest adding a note about how to access the original element the returned instantiates. It's a part of SVG with which ordinary web developers may be least familiar. /*\ * Element.use [ method ] ** - * Creates `` element linked to the current element. + * Creates a `` element linked to the current element ** - = (Element) `` element + = (Element) the `` element \*/ elproto.use = function () { var use, @@ -2898,7 +2918,7 @@ function arrayFirstValue(arr) { * Element.clone [ method ] ** - * Creates clone of the element and inserts it after the element. + * Creates a clone of the element and inserts it after the element ** = (Element) the clone \*/ @@ -2973,11 +2993,12 @@ function arrayFirstValue(arr) { clone.insertAfter(this); return clone; }; +// SIERRA Element.toDefs(): If this _moves_ an element to the region, why is the return value a _clone_? Also unclear why it's called the _relative_ section. Perhaps _shared_? /*\ * Element.toDefs [ method ] ** - * Moves element to the relative `` section. + * Moves element to the shared `` area ** = (Element) the clone \*/ @@ -2986,18 +3007,20 @@ function arrayFirstValue(arr) { defs.appendChild(this.node); return this; }; +// SIERRA Element.pattern(): x/y/width/height data types are listed as both String and Number. Is that an error, or does it mean strings are coerced? +// SIERRA Element.pattern(): clarify that x/y are offsets that e.g., may add gutters between the tiles. /*\ * Element.pattern [ method ] ** - * Creates `` element from the current element. + * Creates a `` element from the current element ** * To create a pattern you have to specify the pattern rect: - x (string|number) - y (string|number) - width (string|number) - height (string|number) - = (Element) `` element + = (Element) the `` element * You can use pattern later on as an argument for `fill` attribute: | var p = paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({ | fill: "none", @@ -3032,11 +3055,13 @@ function arrayFirstValue(arr) { p.node.appendChild(this.node); return p; }; +// SIERRA Element.marker(): clarify what a reference point is. E.g., helps you offset the object from its edge such as when centering it over a path. +// SIERRA Element.marker(): I suggest the method should accept default reference point values. Perhaps centered with (refX = width/2) and (refY = height/2)? Also, couldn't it assume the element's current _width_ and _height_? And please specify what _x_ and _y_ mean: offsets? If so, from where? Couldn't they also be assigned default values? /*\ * Element.marker [ method ] ** - * Creates `` element from the current element. + * Creates a `` element from the current element ** * To create a marker you have to specify the bounding rect and reference point: - x (number) @@ -3045,8 +3070,8 @@ function arrayFirstValue(arr) { - height (number) - refX (number) - refY (number) - = (Element) `` element - * You can use pattern later on as an argument for `marker-start` or `marker-end` attributes. + = (Element) the `` element + * You can specify the marker later as an argument for `marker-start`, `marker-end`, `marker-mid`, and `marker` attributes. The `marker` attribute places the marker at every point along the path, and `marker-mid` places them at every point except the start and end. \*/ // TODO add usage for markers elproto.marker = function (x, y, width, height, refX, refY) { @@ -3094,16 +3119,17 @@ function arrayFirstValue(arr) { easing && (this.easing = easing); callback && (this.callback = callback); }; + // SIERRA All object methods should feature sample code. This is just one instance. /*\ * Snap.animation [ method ] ** - * Creates animation object. + * Creates an animation object ** - attr (object) attributes of final destination - - ms (number) animation duration + - duration (number) duration of the animation, in milliseconds - easing (function) #optional one of easing functions of @mina or custom one - - callback (function) #optional callback + - callback (function) #optional callback function that fires when animation ends = (object) animation object \*/ Snap.animation = function (attr, ms, easing, callback) { @@ -3113,9 +3139,9 @@ function arrayFirstValue(arr) { * Element.inAnim [ method ] ** - * Returns an array of animations element currently in + * Returns a set of animations that may be able to manipulate the current element ** - = (object) in format + = (object) in format: o { o anim (object) animation object, o curStatus (number) 0..1 — status of the animation: 0 — just started, 1 — just finished, @@ -3142,18 +3168,22 @@ function arrayFirstValue(arr) { } return res; }; + // SIERRA unfamiliar with the phrase _caring function,_ so the text for the _setter_ param isn't clear. + // SIERRA With the animation's start/end states defined, how is its _speed_ distinguished from its _duration_? + // SIERRA Text explaining the mina format should move to the section on the mina object interface. (Prior comment applies: object interfaces need to also be documented.) + // SIERRA unclear how to express a custom _easing_ (+) /*\ * Snap.animate [ method ] ** - * Runs generic animation of one number into another with a caring function. + * Runs generic animation of one number into another with a caring function ** - from (number|array) number or array of numbers - to (number|array) number or array of numbers - - setter (function) caring function that will take one number argument - - ms (number) duration + - setter (function) caring function that accepts one number argument + - duration (number) duration, in milliseconds - easing (function) #optional easing function from @mina or custom - - callback (function) #optional + - callback (function) #optional callback function to execute when animation ends = (object) animation object in @mina format o { o id (string) animation id, consider it read-only, @@ -3174,13 +3204,14 @@ function arrayFirstValue(arr) { callback && eve.once("mina.finish." + anim.id, callback); return anim; }; + // SIERRA Element.stop(). Does it _stop_ or _pause_ the animations? If you run Element.animate() to restart the animation, does it commence from the beginning? /*\ * Element.stop [ method ] ** - * Stops all the animations of the current element. + * Stops all the animations for the current element ** - = (Element) the element + = (Element) the current element \*/ elproto.stop = function () { var anims = this.inAnim(); @@ -3189,17 +3220,19 @@ function arrayFirstValue(arr) { } return this; }; + // SIERRA Element.animate(): For _attrs_, clarify if they represent the destination values, and if the animation executes relative to the element's current attribute values. + // SIERRA would a _custom_ animation function be an SVG keySplines value? /*\ * Element.animate [ method ] ** - * Animate given attributes of the element. + * Animates the given attributes of the element ** - attrs (object) key-value pairs of destination attributes - - ms (number) duration + - duration (number) duration of the animation in milliseconds - easing (function) #optional easing function from @mina or custom - - callback (function) #optional - = (Element) the element + - callback (function) #optional callback function that executes when the animation ends + = (Element) the current element \*/ elproto.animate = function (attrs, ms, easing, callback) { if (typeof easing == "function" && !easing.length) { @@ -3250,11 +3283,12 @@ function arrayFirstValue(arr) { return el; }; var eldata = {}; + // SIERRA Element.data()/Element.removeData(): Do these correspond to _data- attributes, and if so, can you ordinarily use the the dataset API within SVG? /*\ * Element.data [ method ] ** - * Adds or retrieves given value asociated with given key. + * Adds or retrieves given value associated with given key ** * See also @Element.removeData - key (string) key to store data @@ -3305,20 +3339,21 @@ function arrayFirstValue(arr) { } return this; }; + // SIERRA Element.toString(): Recommend renaming this _outerSVG_ to keep it consistent with HTML & innerSVG, and also to avoid confusing it with what textContent() does. Cross-reference with innerSVG. /*\ * Element.toString [ method ] ** - * Returns SVG code of the element. Equivalent to `outerHTML` in HTML context. - = (string) SVG code of the element. + * Returns SVG code for the element, equivalent to HTML's `outerHTML` + = (string) SVG code for the element \*/ elproto.toString = toString(1); /*\ * Element.innerSVG [ method ] ** - * Returns SVG code of the element. Equivalent to `innerHTML` in HTML context. - = (string) SVG code of the element. + * Returns SVG code for the element's contents, equivalent to HTML's `innerHTML` + = (string) SVG code for the element \*/ elproto.innerSVG = toString(); function toString(type) { @@ -3349,14 +3384,15 @@ function arrayFirstValue(arr) { }; } }(Element.prototype)); +// SIERRA Snap.parse() accepts & returns a fragment, but there's no info on what it does in between. What if it doesn't parse? /*\ * Snap.parse [ method ] ** - * Parses SVG fragment and converts it into @Fragment. + * Parses SVG fragment and converts it into a @Fragment ** - svg (string) SVG string - = (Fragment) the fragment + = (Fragment) the @Fragment \*/ Snap.parse = function (svg) { var f = glob.doc.createDocumentFragment(), @@ -3397,11 +3433,12 @@ Fragment.prototype.select = Element.prototype.select; * See @Element.selectAll \*/ Fragment.prototype.selectAll = Element.prototype.selectAll; +// SIERRA Snap.fragment() could especially use a code example /*\ * Snap.fragment [ method ] ** - * Creates DOM fragment from given list of elements or strings + * Creates a DOM fragment from a given list of elements or strings ** - varargs (…) SVG string = (Fragment) the @Fragment @@ -3431,6 +3468,7 @@ function make(name, parent) { el.type = name; return el; } +// SIERRA Is Paper() part of final interface, akin to Snap()? Document if so. function Paper(w, h) { var res, desc, @@ -3480,7 +3518,7 @@ function wrap(dom) { } return new Element(dom); } -// gradients’ helpers +// gradients' helpers function Gstops() { return this.selectAll("stop"); } @@ -3594,11 +3632,11 @@ function gradientRadial(defs, cx, cy, r, fx, fy) { * Paper.el [ method ] ** - * Creates element on paper with a given name and no attributes. + * Creates an element on paper with a given name and no attributes ** - name (string) tag name - attr (object) attributes - = (Element) the element + = (Element) the current element > Usage | var c = paper.circle(10, 10, 10); // is the same as... | var c = paper.el("circle").attr({ @@ -3614,15 +3652,15 @@ function gradientRadial(defs, cx, cy, r, fx, fy) { * Paper.rect [ method ] * - * Draws a rectangle. + * Draws a rectangle ** - x (number) x coordinate of the top left corner - y (number) y coordinate of the top left corner - width (number) width - height (number) height - - rx (number) #optional horisontal radius for rounded corners, default is 0 + - rx (number) #optional horizontal radius for rounded corners, default is 0 - ry (number) #optional vertical radius for rounded corners, default is rx or 0 - = (object) Element object with type “rect” + = (object) the `rect` element ** > Usage | // regular rectangle @@ -3657,12 +3695,12 @@ function gradientRadial(defs, cx, cy, r, fx, fy) { * Paper.circle [ method ] ** - * Draws a circle. + * Draws a circle ** - x (number) x coordinate of the centre - y (number) y coordinate of the centre - r (number) radius - = (object) Element object with type “circle” + = (object) the `circle` element ** > Usage | var c = paper.circle(50, 50, 40); @@ -3680,34 +3718,21 @@ function gradientRadial(defs, cx, cy, r, fx, fy) { } return el; }; + /*\ * Paper.image [ method ] ** - * Embeds an image into the surface. + * Places an image on the surface ** - src (string) URI of the source image - - x (number) x coordinate position - - y (number) y coordinate position + - x (number) x offset position + - y (number) y offset position - width (number) width of the image - height (number) height of the image - = (object) Raphaël element object with type “image” - ** - > Usage - | var c = paper.image("apple.png", 10, 10, 80, 80); - \*/ - /*\ - * Paper.image - [ method ] - ** - * Embeds an image into the surface. - ** - - src (string) URI of the source image - - x (number) x coordinate position - - y (number) y coordinate position - - width (number) width of the image - - height (number) height of the image - = (object) Element object with type “image” + = (object) the `image` element + * or + = (object) Raphaël element object with type `image` ** > Usage | var c = paper.image("apple.png", 10, 10, 80, 80); @@ -3744,13 +3769,13 @@ function gradientRadial(defs, cx, cy, r, fx, fy) { * Paper.ellipse [ method ] ** - * Draws an ellipse. + * Draws an ellipse ** - x (number) x coordinate of the centre - y (number) y coordinate of the centre - rx (number) horizontal radius - ry (number) vertical radius - = (object) Element object with type “ellipse” + = (object) the `ellipse` element ** > Usage | var c = paper.ellipse(50, 50, 40, 20); @@ -3769,15 +3794,16 @@ function gradientRadial(defs, cx, cy, r, fx, fy) { } return el; }; + // SIERRA Paper.path(): Unclear from the link what a Catmull-Rom curveto is, and why it would make life any easier. /*\ * Paper.path [ method ] ** - * Creates a path element by given path data string. - - pathString (string) #optional path string in SVG format. - * Path string consists of one-letter commands, followed by comma seprarated arguments in numercal form. Example: + * Creates a `` element using the given string as the path's definition + - pathString (string) #optional path string in SVG format + * Path string consists of one-letter commands, followed by comma seprarated arguments in numerical form. Example: | "M10,20L30,40" - * Here we can see two commands: “M”, with arguments `(10, 20)` and “L” with arguments `(30, 40)`. Upper case letter mean command is absolute, lower case—relative. + * This example features two commands: `M`, with arguments `(10, 20)` and `L` with arguments `(30, 40)`. Uppercase letter commands express coordinates in absolute terms, while lowercase commands express them in relative terms from the most recently declared coordinates. * #

    Here is short list of commands available, for more details see SVG path string format or article about path strings at MDN.

    # @@ -3792,8 +3818,8 @@ function gradientRadial(defs, cx, cy, r, fx, fy) { # # #
    CommandNameParameters
    Tsmooth quadratic Bézier curveto(x y)+
    Aelliptical arc(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
    RCatmull-Rom curveto*x1 y1 (x y)+
    - * * “Catmull-Rom curveto” is a not standard SVG command and added to make life easier. - * Note: there is a special case when path consist of just three commands: “M10,10R…z”. In this case path will smoothly connects to its beginning. + * * _Catmull-Rom curveto_ is a not standard SVG command and added to make life easier. + * Note: there is a special case when a path consists of only three commands: `M10,10R…z`. In this case the path connects back to its starting point. > Usage | var c = paper.path("M10 10L90 90"); | // draw a diagonal line: @@ -3810,19 +3836,20 @@ function gradientRadial(defs, cx, cy, r, fx, fy) { } return el; }; +// SIERRA Paper.g(): Don't understand the code comment about the order being _different._ Wouldn't it be a rect followed by a circle? /*\ * Paper.g [ method ] ** - * Makes a group element. + * Creates a group element ** - - varargs (…) #optional elements - = (object) Element object with type “g” + - varargs (…) #optional elements to nest within the group + = (object) the `g` element ** > Usage | var c1 = paper.circle(), | c2 = paper.rect(), - | g = paper.g(c2, c1); // note that the order of elements will be different + | g = paper.g(c2, c1); // note that the order of elements is different * or | var c1 = paper.circle(), | c2 = paper.rect(), @@ -3852,12 +3879,12 @@ function gradientRadial(defs, cx, cy, r, fx, fy) { * Paper.text [ method ] ** - * Draws a text string. + * Draws a text string ** - x (number) x coordinate position - y (number) y coordinate position - - text (string|array) The text string to draw or array of s - = (object) Element object with type “text” + - text (string|array) The text string to draw or array of strings to nest within separate `` elements + = (object) the `text` element ** > Usage | var t1 = paper.text(50, 50, "Snap"); @@ -3880,13 +3907,13 @@ function gradientRadial(defs, cx, cy, r, fx, fy) { * Paper.line [ method ] ** - * Draws a line. + * Draws a line ** - x1 (number) x coordinate position of the start - y1 (number) y coordinate position of the start - x2 (number) x coordinate position of the end - y2 (number) y coordinate position of the end - = (object) Element object with type “line” + = (object) the `line` element ** > Usage | var t1 = paper.line(50, 50, 100, 100); @@ -3909,12 +3936,12 @@ function gradientRadial(defs, cx, cy, r, fx, fy) { * Paper.polyline [ method ] ** - * Draws a polyline. + * Draws a polyline ** - points (array) array of points * or - varargs (…) points - = (object) Element object with type “text” + = (object) the `polyline` element ** > Usage | var p1 = paper.polyline([10, 10, 100, 100]); @@ -3960,34 +3987,38 @@ function gradientRadial(defs, cx, cy, r, fx, fy) { * Paper.gradient [ method ] ** - * Creates a gradient element. + * Creates a gradient element ** - gradient (string) gradient descriptor > Gradient Descriptor - * Gradient descriptor consists of `()`. Type - * could be linear or radial, which presented as letter “L” or “R”. Any - * type could be absolute or relative, absolute gradient take it coords - * relative to the SVG surface, while relative takes them relative to - * the bounding box of the element it applied to. For absolute - * coordinates you specify type as an upper case letter (“L” or “R”). - * For relative use low case letter (“l” or “r”). Coordinates specify - * vector of gradient for linear as x1, y1, x2, y2. For radial as cx, - * cy, r and optional fx, fy. Colors are list of dash separated colors. - * Optionally color could have offset after colon. - > Example - | var g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff"); + * The gradient descriptor is an expression formatted as + * follows: `()`. The `` can be + * either linear or radial. The uppercase `L` or `R` letters + * indicate absolute coordinates offset from the SVG surface. + * Lowercase `l` or `r` letters indicate coordinates + * calculated relative to the element to which the gradient is + * applied. Coordinates specify a linear gradient vector as + * `x1`, `y1`, `x2`, `y2`, or a radial gradient as `cx`, `cy`, + * `r` and optional `fx`, `fy` specifying a focal point away + * from the center of the circle. Specify `` as a list + * of dash-separated CSS color values. Each color may be + * followed by a custom offset value, separated with a colon + * character. + > Examples * Linear gradient, relative from top-left corner to bottom-right - * corner, from black through red to white. - | var g = paper.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff"); + * corner, from black through red to white: + | var g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff"); * Linear gradient, absolute from (0, 0) to (100, 100), from black - * through red at 25% to white. - | var g = paper.gradient("r(0.5, 0.5, 0.5)#000-#fff"); + * through red at 25% to white: + | var g = paper.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff"); * Radial gradient, relative from the center of the element with radius - * 0.5 of the width, from black to white. + * half the width, from black to white: + | var g = paper.gradient("r(0.5, 0.5, 0.5)#000-#fff"); + * To apply the gradient: | paper.circle(50, 50, 40).attr({ | fill: g | }); - = (object) Element object with type “gradient” + = (object) the `gradient` element \*/ proto.gradient = function (str) { return gradient(this.defs, str); @@ -4002,8 +4033,8 @@ function gradientRadial(defs, cx, cy, r, fx, fy) { * Paper.toString [ method ] ** - * Returns SVG code of the @Paper. - = (string) SVG code of the @Paper. + * Returns SVG code for the @Paper + = (string) SVG code for the @Paper \*/ proto.toString = function () { var f = glob.doc.createDocumentFragment(), @@ -4025,7 +4056,7 @@ function gradientRadial(defs, cx, cy, r, fx, fy) { * Snap.ajax [ method ] ** - * Simple implementation of Ajax. + * Simple implementation of Ajax ** - url (string) URL - postData (object|string) data for post request @@ -4035,7 +4066,7 @@ function gradientRadial(defs, cx, cy, r, fx, fy) { - url (string) URL - callback (function) callback - scope (object) #optional scope of callback - = (XMLHttpRequest) XMLHttpRequest (just in case) + = (XMLHttpRequest) the XMLHttpRequest object, just in case \*/ Snap.ajax = function (url, postData, callback, scope){ var req = new XMLHttpRequest, @@ -4077,7 +4108,7 @@ Snap.ajax = function (url, postData, callback, scope){ * Snap.load [ method ] ** - * Loads external SVG file as a @Fragment. For more advanced AJAX see @Snap.ajax. + * Loads external SVG file as a @Fragment (see @Snap.ajax for more advanced AJAX) ** - url (string) URL - callback (function) callback @@ -5867,26 +5898,26 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Snap.path.getTotalLength [ method ] ** - * Returns length of the given path in pixels. + * Returns the length of the given path in pixels ** - - path (string) SVG path string. + - path (string) SVG path string ** - = (number) length. + = (number) length \*/ Snap.path.getTotalLength = getTotalLength; /*\ * Snap.path.getPointAtLength [ method ] ** - * Return coordinates of the point located at the given length on the given path. + * Returns the coordinates of the point located at the given length along the given path ** - path (string) SVG path string - - length (number) + - length (number) length, in pixels, from the start of the path, excluding non-rendering jumps ** = (object) representation of the point: o { - o x: (number) x coordinate - o y: (number) y coordinate + o x: (number) x coordinate, + o y: (number) y coordinate, o alpha: (number) angle of derivative o } \*/ @@ -5895,13 +5926,13 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Snap.path.getSubpath [ method ] ** - * Return subpath of a given path from given length to given length. + * Returns the subpath of a given path between given start and end lengths ** - path (string) SVG path string - - from (number) position of the start of the segment - - to (number) position of the end of the segment + - from (number) length, in pixels, from the start of the path to the start of the segment + - to (number) length, in pixels, from the start of the path to the end of the segment ** - = (string) pathstring for the segment + = (string) path string definition for the segment \*/ Snap.path.getSubpath = function (path, from, to) { if (this.getTotalLength(path) - to < 1e-6) { @@ -5914,42 +5945,44 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.getTotalLength [ method ] ** - * Returns length of the path in pixels. Only works for element of “path” type. - = (number) length. + * Returns the length of the path in pixels (only works for `path` elements) + = (number) length \*/ elproto.getTotalLength = function () { if (this.node.getTotalLength) { return this.node.getTotalLength(); } }; + // SIERRA Element.getPointAtLength()/Element.getTotalLength(): If a is broken into different segments, is the jump distance to the new coordinates set by the _M_ or _m_ commands calculated as part of the path's total length? /*\ * Element.getPointAtLength [ method ] ** - * Return coordinates of the point located at the given length on the given path. Only works for element of “path” type. + * Returns coordinates of the point located at the given length on the given path (only works for `path` elements) ** - - length (number) + - length (number) length, in pixels, from the start of the path, excluding non-rendering jumps ** = (object) representation of the point: o { - o x: (number) x coordinate - o y: (number) y coordinate + o x: (number) x coordinate, + o y: (number) y coordinate, o alpha: (number) angle of derivative o } \*/ elproto.getPointAtLength = function (length) { return getPointAtLength(this.attr("d"), length); }; + // SIERRA Element.getSubpath(): Similar to the problem for Element.getPointAtLength(). Unclear how this would work for a segmented path. Overall, the concept of _subpath_ and what I'm calling a _segment_ (series of non-_M_ or _Z_ commands) is unclear. /*\ * Element.getSubpath [ method ] ** - * Return subpath of a given element from given length to given length. Only works for element of “path” type. + * Returns subpath of a given element from given start and end lengths (only works for `path` elements) ** - - from (number) position of the start of the segment - - to (number) position of the end of the segment + - from (number) length, in pixels, from the start of the path to the start of the segment + - to (number) length, in pixels, from the start of the path to the end of the segment ** - = (string) pathstring for the segment + = (string) path string definition for the segment \*/ elproto.getSubpath = function (from, to) { return Snap.path.getSubpath(this.attr("d"), from, to); @@ -5961,7 +5994,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { ** * Utility method ** - * Find dot coordinates on the given cubic bezier curve at the given t. + * Finds dot coordinates on the given cubic beziér curve at the given t - p1x (number) x of the first point of the curve - p1y (number) y of the first point of the curve - c1x (number) x of the first anchor of the curve @@ -5973,24 +6006,24 @@ Snap.plugin(function (Snap, Element, Paper, glob) { - t (number) position on the curve (0..1) = (object) point information in format: o { - o x: (number) x coordinate of the point - o y: (number) y coordinate of the point + o x: (number) x coordinate of the point, + o y: (number) y coordinate of the point, o m: { - o x: (number) x coordinate of the left anchor + o x: (number) x coordinate of the left anchor, o y: (number) y coordinate of the left anchor - o } + o }, o n: { - o x: (number) x coordinate of the right anchor + o x: (number) x coordinate of the right anchor, o y: (number) y coordinate of the right anchor - o } + o }, o start: { - o x: (number) x coordinate of the start of the curve + o x: (number) x coordinate of the start of the curve, o y: (number) y coordinate of the start of the curve - o } + o }, o end: { - o x: (number) x coordinate of the end of the curve + o x: (number) x coordinate of the end of the curve, o y: (number) y coordinate of the end of the curve - o } + o }, o alpha: (number) angle of the curve derivative at the point o } \*/ @@ -6001,7 +6034,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { ** * Utility method ** - * Return bounding box of a given cubic bezier curve + * Returns the bounding box of a given cubic beziér curve - p1x (number) x of the first point of the curve - p1y (number) y of the first point of the curve - c1x (number) x of the first anchor of the curve @@ -6011,15 +6044,15 @@ Snap.plugin(function (Snap, Element, Paper, glob) { - p2x (number) x of the second point of the curve - p2y (number) y of the second point of the curve * or - - bez (array) array of six points for bezier curve + - bez (array) array of six points for beziér curve = (object) point information in format: o { o min: { - o x: (number) x coordinate of the left point + o x: (number) x coordinate of the left point, o y: (number) y coordinate of the top point - o } + o }, o max: { - o x: (number) x coordinate of the right point + o x: (number) x coordinate of the right point, o y: (number) y coordinate of the bottom point o } o } @@ -6031,11 +6064,11 @@ Snap.plugin(function (Snap, Element, Paper, glob) { ** * Utility method ** - * Returns `true` if given point is inside bounding box. + * Returns `true` if given point is inside bounding box - bbox (string) bounding box - x (string) x coordinate of the point - y (string) y coordinate of the point - = (boolean) `true` if point inside + = (boolean) `true` if point is inside \*/ Snap.path.isPointInsideBBox = isPointInsideBBox; /*\ @@ -6047,7 +6080,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Returns `true` if two bounding boxes intersect - bbox1 (string) first bounding box - bbox2 (string) second bounding box - = (boolean) `true` if they intersect + = (boolean) `true` if bounding boxes intersect \*/ Snap.path.isBBoxIntersect = isBBoxIntersect; /*\ @@ -6062,30 +6095,31 @@ Snap.plugin(function (Snap, Element, Paper, glob) { = (array) dots of intersection o [ o { - o x: (number) x coordinate of the point - o y: (number) y coordinate of the point - o t1: (number) t value for segment of path1 - o t2: (number) t value for segment of path2 - o segment1: (number) order number for segment of path1 - o segment2: (number) order number for segment of path2 - o bez1: (array) eight coordinates representing beziér curve for the segment of path1 + o x: (number) x coordinate of the point, + o y: (number) y coordinate of the point, + o t1: (number) t value for segment of path1, + o t2: (number) t value for segment of path2, + o segment1: (number) order number for segment of path1, + o segment2: (number) order number for segment of path2, + o bez1: (array) eight coordinates representing beziér curve for the segment of path1, o bez2: (array) eight coordinates representing beziér curve for the segment of path2 o } o ] \*/ Snap.path.intersection = pathIntersection; Snap.path.intersectionNumber = pathIntersectionNumber; + // SIERRA Does the fill mode affect how isPointInside behaves? /*\ * Snap.path.isPointInside [ method ] ** * Utility method ** - * Returns `true` if given point is inside a given closed path. + * Returns `true` if given point is inside a given closed path - path (string) path string - x (number) x of the point - y (number) y of the point - = (boolean) true, if point is inside the path + = (boolean) `true` if point is inside the path \*/ Snap.path.isPointInside = isPointInsidePath; /*\ @@ -6094,15 +6128,15 @@ Snap.plugin(function (Snap, Element, Paper, glob) { ** * Utility method ** - * Return bounding box of a given path + * Returns the bounding box of a given path - path (string) path string = (object) bounding box o { - o x: (number) x coordinate of the left top point of the box - o y: (number) y coordinate of the left top point of the box - o x2: (number) x coordinate of the right bottom point of the box - o y2: (number) y coordinate of the right bottom point of the box - o width: (number) width of the box + o x: (number) x coordinate of the left top point of the box, + o y: (number) y coordinate of the left top point of the box, + o x2: (number) x coordinate of the right bottom point of the box, + o y2: (number) y coordinate of the right bottom point of the box, + o width: (number) width of the box, o height: (number) height of the box o } \*/ @@ -6114,7 +6148,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { ** * Utility method ** - * Converts path coordinates into relative values. + * Converts path coordinates into relative values - path (string) path string = (array) path string \*/ @@ -6125,7 +6159,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { ** * Utility method ** - * Converts path coordinates into absolute values. + * Converts path coordinates into absolute values - path (string) path string = (array) path string \*/ @@ -6136,16 +6170,16 @@ Snap.plugin(function (Snap, Element, Paper, glob) { ** * Utility method ** - * Converts path to a new path where all segments are cubic bezier curves. + * Converts path to a new path where all segments are cubic beziér curves - pathString (string|array) path string or array of segments - = (array) array of segments. + = (array) array of segments \*/ Snap.path.toCubic = path2curve; /*\ * Snap.path.map [ method ] ** - * Transform the path string with given matrix. + * Transform the path string with the given matrix - path (string) path string - matrix (object) see @Matrix = (string) transformed path string @@ -6190,7 +6224,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Set.push [ method ] ** - * Adds each argument to the current set. + * Adds each argument to the current set = (object) original element \*/ setproto.push = function () { @@ -6210,7 +6244,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Set.pop [ method ] ** - * Removes last element and returns it. + * Removes last element and returns it = (object) element \*/ setproto.pop = function () { @@ -6221,9 +6255,9 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Set.forEach [ method ] ** - * Executes given function for each element in the set. + * Executes given function for each element in the set * - * If function returns `false` it will stop loop running. + * If the function returns `false`, the loop stops running. ** - callback (function) function to run - thisArg (object) context object for the callback @@ -6247,7 +6281,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Set.clear [ method ] ** - * Removeds all elements from the set + * Removes all elements from the set \*/ setproto.clear = function () { while (this.length) { @@ -6258,7 +6292,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Set.splice [ method ] ** - * Removes given element from the set + * Removes range of elements from the set ** - index (number) position of the deletion - count (number) number of element to remove @@ -6298,7 +6332,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Removes given element from the set ** - element (object) element to remove - = (boolean) `true` if object was found & removed from the set + = (boolean) `true` if object was found and removed from the set \*/ setproto.exclude = function (el) { for (var i = 0, ii = this.length; i < ii; i++) if (this[i] == el) { @@ -6666,7 +6700,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.click [ method ] ** - * Adds event handler for click for the element. + * Adds a click event handler to the element - handler (function) handler for the event = (object) @Element \*/ @@ -6674,7 +6708,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.unclick [ method ] ** - * Removes event handler for click for the element. + * Removes a click event handler from the element - handler (function) handler for the event = (object) @Element \*/ @@ -6683,7 +6717,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.dblclick [ method ] ** - * Adds event handler for double click for the element. + * Adds a double click event handler to the element - handler (function) handler for the event = (object) @Element \*/ @@ -6691,7 +6725,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.undblclick [ method ] ** - * Removes event handler for double click for the element. + * Removes a double click event handler from the element - handler (function) handler for the event = (object) @Element \*/ @@ -6700,7 +6734,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.mousedown [ method ] ** - * Adds event handler for mousedown for the element. + * Adds a mousedown event handler to the element - handler (function) handler for the event = (object) @Element \*/ @@ -6708,7 +6742,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.unmousedown [ method ] ** - * Removes event handler for mousedown for the element. + * Removes a mousedown event handler from the element - handler (function) handler for the event = (object) @Element \*/ @@ -6717,7 +6751,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.mousemove [ method ] ** - * Adds event handler for mousemove for the element. + * Adds a mousemove event handler to the element - handler (function) handler for the event = (object) @Element \*/ @@ -6725,7 +6759,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.unmousemove [ method ] ** - * Removes event handler for mousemove for the element. + * Removes a mousemove event handler from the element - handler (function) handler for the event = (object) @Element \*/ @@ -6734,7 +6768,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.mouseout [ method ] ** - * Adds event handler for mouseout for the element. + * Adds a mouseout event handler to the element - handler (function) handler for the event = (object) @Element \*/ @@ -6742,7 +6776,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.unmouseout [ method ] ** - * Removes event handler for mouseout for the element. + * Removes a mouseout event handler from the element - handler (function) handler for the event = (object) @Element \*/ @@ -6751,7 +6785,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.mouseover [ method ] ** - * Adds event handler for mouseover for the element. + * Adds a mouseover event handler to the element - handler (function) handler for the event = (object) @Element \*/ @@ -6759,7 +6793,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.unmouseover [ method ] ** - * Removes event handler for mouseover for the element. + * Removes a mouseover event handler from the element - handler (function) handler for the event = (object) @Element \*/ @@ -6768,7 +6802,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.mouseup [ method ] ** - * Adds event handler for mouseup for the element. + * Adds a mouseup event handler to the element - handler (function) handler for the event = (object) @Element \*/ @@ -6776,7 +6810,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.unmouseup [ method ] ** - * Removes event handler for mouseup for the element. + * Removes a mouseup event handler from the element - handler (function) handler for the event = (object) @Element \*/ @@ -6785,7 +6819,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.touchstart [ method ] ** - * Adds event handler for touchstart for the element. + * Adds a touchstart event handler to the element - handler (function) handler for the event = (object) @Element \*/ @@ -6793,7 +6827,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.untouchstart [ method ] ** - * Removes event handler for touchstart for the element. + * Removes a touchstart event handler from the element - handler (function) handler for the event = (object) @Element \*/ @@ -6802,7 +6836,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.touchmove [ method ] ** - * Adds event handler for touchmove for the element. + * Adds a touchmove event handler to the element - handler (function) handler for the event = (object) @Element \*/ @@ -6810,7 +6844,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.untouchmove [ method ] ** - * Removes event handler for touchmove for the element. + * Removes a touchmove event handler from the element - handler (function) handler for the event = (object) @Element \*/ @@ -6819,7 +6853,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.touchend [ method ] ** - * Adds event handler for touchend for the element. + * Adds a touchend event handler to the element - handler (function) handler for the event = (object) @Element \*/ @@ -6827,7 +6861,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.untouchend [ method ] ** - * Removes event handler for touchend for the element. + * Removes a touchend event handler from the element - handler (function) handler for the event = (object) @Element \*/ @@ -6836,7 +6870,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.touchcancel [ method ] ** - * Adds event handler for touchcancel for the element. + * Adds a touchcancel event handler to the element - handler (function) handler for the event = (object) @Element \*/ @@ -6844,7 +6878,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.untouchcancel [ method ] ** - * Removes event handler for touchcancel for the element. + * Removes a touchcancel event handler from the element - handler (function) handler for the event = (object) @Element \*/ @@ -6880,7 +6914,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.hover [ method ] ** - * Adds event handlers for hover for the element. + * Adds hover event handlers to the element - f_in (function) handler for hover in - f_out (function) handler for hover out - icontext (object) #optional context for hover in handler @@ -6894,7 +6928,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.unhover [ method ] ** - * Removes event handlers for hover for the element. + * Removes hover event handlers from the element - f_in (function) handler for hover in - f_out (function) handler for hover out = (object) @Element @@ -6903,32 +6937,37 @@ Snap.plugin(function (Snap, Element, Paper, glob) { return this.unmouseover(f_in).unmouseout(f_out); }; var draggable = []; + // SIERRA unclear what _context_ refers to for starting, ending, moving the drag gesture. + // SIERRA Element.drag(): _x position of the mouse_: Where are the x/y values offset from? + // SIERRA Element.drag(): much of this member's doc appears to be duplicated for some reason. + // SIERRA Unclear about this sentence: _Additionally following drag events will be triggered: drag.start. on start, drag.end. on end and drag.move. on every move._ Is there a global _drag_ object to which you can assign handlers keyed by an element's ID? /*\ * Element.drag [ method ] ** - * Adds event handlers for drag of the element. + * Adds event handlers for an element's drag gesture + ** - onmove (function) handler for moving - onstart (function) handler for drag start - onend (function) handler for drag end - mcontext (object) #optional context for moving handler - scontext (object) #optional context for drag start handler - econtext (object) #optional context for drag end handler - * Additionaly following `drag` events will be triggered: `drag.start.` on start, - * `drag.end.` on end and `drag.move.` on every move. When element will be dragged over another element - * `drag.over.` will be fired as well. + * Additionaly following `drag` events are triggered: `drag.start.` on start, + * `drag.end.` on end and `drag.move.` on every move. When element is dragged over another element + * `drag.over.` fires as well. * - * Start event and start handler will be called in specified context or in context of the element with following parameters: + * Start event and start handler are called in specified context or in context of the element with following parameters: o x (number) x position of the mouse o y (number) y position of the mouse o event (object) DOM event object - * Move event and move handler will be called in specified context or in context of the element with following parameters: + * Move event and move handler are called in specified context or in context of the element with following parameters: o dx (number) shift by x from the start point o dy (number) shift by y from the start point o x (number) x position of the mouse o y (number) y position of the mouse o event (object) DOM event object - * End event and end handler will be called in specified context or in context of the element with following parameters: + * End event and end handler are called in specified context or in context of the element with following parameters: o event (object) DOM event object = (object) @Element \*/ @@ -6966,7 +7005,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.onDragOver [ method ] ** - * Shortcut for assigning event handler for `drag.over.` event, where id is id of the element (see @Element.id). + * Shortcut to assign event handler for `drag.over.` event, where `id` is the element's `id` (see @Element.id) - f (function) handler for event, first argument would be the element you are dragging over \*/ // elproto.onDragOver = function (f) { @@ -6976,7 +7015,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Element.undrag [ method ] ** - * Removes all drag event handlers from given element. + * Removes all drag event handlers from the given element \*/ elproto.undrag = function () { var i = draggable.length; @@ -7009,15 +7048,16 @@ Snap.plugin(function (Snap, Element, Paper, glob) { Str = String, $ = Snap._.$; Snap.filter = {}; +// SIERRA Paper.filter(): I don't understand the note. Does that mean an HTML should dedicate a separate SVG region for a filter definition? What's the advantage over a DEFS? /*\ * Paper.filter [ method ] ** - * Creates filter element + * Creates a `` element ** - - filstr (string) SVG fragment of filter provided as a string. + - filstr (string) SVG fragment of filter provided as a string = (object) @Element - * Note: It is recommended to use filters embedded into page inside empty SVG element. + * Note: It is recommended to use filters embedded into the page inside an empty SVG element. > Usage | var f = paper.filter(''), | c = paper.circle(10, 10, 10).attr({ @@ -7072,15 +7112,16 @@ Snap.plugin(function (Snap, Element, Paper, glob) { this.node.removeAttribute("filter"); } }); - + // SIERRA Would help to clarify when various Snap.filter.* matches the behavior of CSS filter property keyword functions. E.g., I don't think CSS's blur() accepts a second parameter for y axis. + // SIERRA Would also be useful to illustrate a chain of >1 filter as a code snippet. /*\ * Snap.filter.blur [ method ] ** - * Returns string of the blur filter. + * Returns an SVG markup string for the blur filter ** - - x (number) amount of horisontal blur in px. - - y (number) #optional amount of vertical blur in px. + - x (number) amount of horizontal blur, in pixels + - y (number) #optional amount of vertical blur, in pixels = (string) filter representation > Usage | var f = paper.filter(Snap.filter.blur(5, 10)), @@ -7104,12 +7145,12 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Snap.filter.shadow [ method ] ** - * Returns string of the shadow filter. + * Returns an SVG markup string for the shadow filter ** - - dx (number) horisontal shift of the shadow in px. - - dy (number) vertical shift of the shadow in px. - - blur (number) #optional amount of blur. - - color (string) #optional color of the shadow. + - dx (number) horizontal shift of the shadow, in pixels + - dy (number) vertical shift of the shadow, in pixels + - blur (number) #optional amount of blur + - color (string) #optional color of the shadow = (string) filter representation > Usage | var f = paper.filter(Snap.filter.shadow(0, 2, 3)), @@ -7148,9 +7189,9 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Snap.filter.grayscale [ method ] ** - * Returns string of the grayscale filter. + * Returns an SVG markup string for the grayscale filter ** - - amount (number) amount of filter (`0..1`). + - amount (number) amount of filter (`0..1`) = (string) filter representation \*/ Snap.filter.grayscale = function (amount) { @@ -7175,9 +7216,9 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Snap.filter.sepia [ method ] ** - * Returns string of the sepia filter. + * Returns an SVG markup string for the sepia filter ** - - amount (number) amount of filter (`0..1`). + - amount (number) amount of filter (`0..1`) = (string) filter representation \*/ Snap.filter.sepia = function (amount) { @@ -7203,9 +7244,9 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Snap.filter.saturate [ method ] ** - * Returns string of the saturate filter. + * Returns an SVG markup string for the saturate filter ** - - amount (number) amount of filter (`0..1`). + - amount (number) amount of filter (`0..1`) = (string) filter representation \*/ Snap.filter.saturate = function (amount) { @@ -7223,9 +7264,9 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Snap.filter.hueRotate [ method ] ** - * Returns string of the hue-rotate filter. + * Returns an SVG markup string for the hue-rotate filter ** - - angle (number) angle of rotation. + - angle (number) angle of rotation = (string) filter representation \*/ Snap.filter.hueRotate = function (angle) { @@ -7241,9 +7282,9 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Snap.filter.invert [ method ] ** - * Returns string of the invert filter. + * Returns an SVG markup string for the invert filter ** - - amount (number) amount of filter (`0..1`). + - amount (number) amount of filter (`0..1`) = (string) filter representation \*/ Snap.filter.invert = function (amount) { @@ -7262,9 +7303,9 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Snap.filter.brightness [ method ] ** - * Returns string of the brightness filter. + * Returns an SVG markup string for the brightness filter ** - - amount (number) amount of filter (`0..1`). + - amount (number) amount of filter (`0..1`) = (string) filter representation \*/ Snap.filter.brightness = function (amount) { @@ -7282,9 +7323,9 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Snap.filter.contrast [ method ] ** - * Returns string of the contrast filter. + * Returns an SVG markup string for the contrast filter ** - - amount (number) amount of filter (`0..1`). + - amount (number) amount of filter (`0..1`) = (string) filter representation \*/ Snap.filter.contrast = function (amount) { diff --git a/src/path.js b/src/path.js index 7e8f8f6..a49469e 100644 --- a/src/path.js +++ b/src/path.js @@ -1066,7 +1066,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Returns the coordinates of the point located at the given length along the given path ** - path (string) SVG path string - - length (number) length, in pixels, from the start of the path, excluding non-rendering jumps VERIFY + - length (number) length, in pixels, from the start of the path, excluding non-rendering jumps ** = (object) representation of the point: o { @@ -1083,8 +1083,8 @@ Snap.plugin(function (Snap, Element, Paper, glob) { * Returns the subpath of a given path between given start and end lengths ** - path (string) SVG path string - - from (number) length, in pixels, from the start of the path to the start of the segment VERIFY - - to (number) length, in pixels, from the start of the path to the end of the segment VERIFY + - from (number) length, in pixels, from the start of the path to the start of the segment + - to (number) length, in pixels, from the start of the path to the end of the segment ** = (string) path string definition for the segment \*/ @@ -1114,7 +1114,7 @@ Snap.plugin(function (Snap, Element, Paper, glob) { ** * Returns coordinates of the point located at the given length on the given path (only works for `path` elements) ** - - length (number) length, in pixels, from the start of the path, excluding non-rendering jumps VERIFY + - length (number) length, in pixels, from the start of the path, excluding non-rendering jumps ** = (object) representation of the point: o { @@ -1133,8 +1133,8 @@ Snap.plugin(function (Snap, Element, Paper, glob) { ** * Returns subpath of a given element from given start and end lengths (only works for `path` elements) ** - - from (number) length, in pixels, from the start of the path to the start of the segment VERIFY - - to (number) length, in pixels, from the start of the path to the end of the segment VERIFY + - from (number) length, in pixels, from the start of the path to the start of the segment + - to (number) length, in pixels, from the start of the path to the end of the segment ** = (string) path string definition for the segment \*/ @@ -1199,16 +1199,14 @@ Snap.plugin(function (Snap, Element, Paper, glob) { - p2y (number) y of the second point of the curve * or - bez (array) array of six points for beziér curve - = (object) point information in format: + = (object) bounding box o { - o min: { - o x: (number) x coordinate of the left point, - o y: (number) y coordinate of the top point - o }, - o max: { - o x: (number) x coordinate of the right point, - o y: (number) y coordinate of the bottom point - o } + o x: (number) x coordinate of the left top point of the box, + o y: (number) y coordinate of the left top point of the box, + o x2: (number) x coordinate of the right bottom point of the box, + o y2: (number) y coordinate of the right bottom point of the box, + o width: (number) width of the box, + o height: (number) height of the box o } \*/ Snap.path.bezierBBox = bezierBBox; @@ -1262,14 +1260,15 @@ Snap.plugin(function (Snap, Element, Paper, glob) { \*/ Snap.path.intersection = pathIntersection; Snap.path.intersectionNumber = pathIntersectionNumber; - // SIERRA Does the fill mode affect how isPointInside behaves? /*\ * Snap.path.isPointInside [ method ] ** * Utility method ** - * Returns `true` if given point is inside a given closed path + * Returns `true` if given point is inside a given closed path. + * + * Note: fill mode doesn’t affect the result of this method. - path (string) path string - x (number) x of the point - y (number) y of the point diff --git a/src/svg.js b/src/svg.js index 31eef95..2b3d7bf 100644 --- a/src/svg.js +++ b/src/svg.js @@ -13,7 +13,7 @@ // limitations under the License. var Snap = (function() { -Snap.version = "0.0.1"; +Snap.version = "0.1.0"; // SIERRA: this method appears to be missing from HTML output /*\ * Snap @@ -322,7 +322,7 @@ Snap.is = is; * Snaps given value to given grid - values (array|number) given array of values or step of the grid - value (number) value to adjust - - tolerance (number) #optional maximum distance to the target value that would trigger the snap. Default is `10`. VERIFY + - tolerance (number) #optional maximum distance to the target value that would trigger the snap. Default is `10`. = (number) adjusted value \*/ Snap.snapTo = function (values, value, tolerance) { @@ -442,8 +442,8 @@ function Matrix(a, b, c, d, e, f) { [ method ] ** * Translate the matrix - - x (number) horizontal offset distance VERIFY - - y (number) vertical offset distance VERIFY + - x (number) horizontal offset distance + - y (number) vertical offset distance \*/ matrixproto.translate = function (x, y) { return this.add(1, 0, 0, 1, x, y); @@ -454,9 +454,9 @@ function Matrix(a, b, c, d, e, f) { [ method ] ** * Scales the matrix - - x (number) amount to be scaled, with `1` resulting in no change VERIFY + - x (number) amount to be scaled, with `1` resulting in no change - y (number) #optional amount to scale along the vertical axis. (Otherwise `x` applies to both axes.) - - cx (number) #optional horizontal origin point from which to scale VERIFY + - cx (number) #optional horizontal origin point from which to scale - cy (number) #optional vertical origin point from which to scale \*/ matrixproto.scale = function (x, y, cx, cy) { @@ -471,9 +471,9 @@ function Matrix(a, b, c, d, e, f) { [ method ] ** * Rotates the matrix - - a (number) angle of rotation, in radians VERIFY - - x (number) horizontal origin point from which to rotate VERIFY - - y (number) vertical origin point from which to rotate VERIFY + - a (number) angle of rotation, in degrees + - x (number) horizontal origin point from which to rotate + - y (number) vertical origin point from which to rotate \*/ matrixproto.rotate = function (a, x, y) { a = rad(a); @@ -2032,7 +2032,7 @@ function arrayFirstValue(arr) { - attr (object) attributes of final destination - duration (number) duration of the animation, in milliseconds - easing (function) #optional one of easing functions of @mina or custom one - - callback (function) #optional callback function that fires when animation ends VERIFY + - callback (function) #optional callback function that fires when animation ends = (object) animation object \*/ Snap.animation = function (attr, ms, easing, callback) { @@ -2042,7 +2042,7 @@ function arrayFirstValue(arr) { * Element.inAnim [ method ] ** - * Returns a set of animations that may be able to manipulate the current element VERIFY + * Returns a set of animations that may be able to manipulate the current element ** = (object) in format: o { @@ -2086,7 +2086,7 @@ function arrayFirstValue(arr) { - setter (function) caring function that accepts one number argument - duration (number) duration, in milliseconds - easing (function) #optional easing function from @mina or custom - - callback (function) #optional callback function to execute when animation ends VERIFY + - callback (function) #optional callback function to execute when animation ends = (object) animation object in @mina format o { o id (string) animation id, consider it read-only, @@ -2134,7 +2134,7 @@ function arrayFirstValue(arr) { - attrs (object) key-value pairs of destination attributes - duration (number) duration of the animation in milliseconds - easing (function) #optional easing function from @mina or custom - - callback (function) #optional callback function that executes when the animation ends VERIFY + - callback (function) #optional callback function that executes when the animation ends = (Element) the current element \*/ elproto.animate = function (attrs, ms, easing, callback) {