Snap.svg

http://snapsvg.io/docs
Admin
Snap.svg is a JavaScript library for working with SVG, enabling developers to create, manipulate,...
Tokens:37,886
Snippets:205
Trust Score:5.6
Update:10 months ago
Show doc for...
Tokens:
Raw
### Element Transformation Methods

Methods related to element transformations, including getting transformation strings and matrices.

```APIDOC
## Element.transform(tstr)

### Description
Applies a transformation string to the element.

### Method
GET or POST

### Endpoint
N/A (Method on Element object)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Example of getting transform string
const transformString = element.transform(); 

// Example of setting transform string
element.transform("t10-10r30");
```

### Response
#### Success Response (200)
- **Element** (_Element_) - Returns the current element for chaining.
- **object** (_object_) - Returns a transformation descriptor object when no argument is provided. The descriptor includes:
    - **string** (_string_) - The transform string.
    - **globalMatrix** (_Matrix_) - The matrix of all transformations applied to the element or its parents.
    - **localMatrix** (_Matrix_) - The matrix of transformations applied only to the element.
    - **diffMatrix** (_Matrix_) - The matrix of the difference between global and local transformations.
    - **global** (_string_) - The global transformation as a string.
    - **local** (_string_) - The local transformation as a string.
    - **toString** (_function_) - A function that returns the `string` property.

#### Response Example
```json
{
  "string": "t10-10r30",
  "globalMatrix": {"..."}, 
  "localMatrix": {"..."},
  "diffMatrix": {"..."},
  "global": "matrix(0.866, 0.5, -0.5, 0.866, 10, 10)",
  "local": "matrix(1, 0, 0, 1, 0, 0)",
  "toString": "function()"
}
```
```

--------------------------------

### Snap.svg Path String Example

Demonstrates the basic structure of an SVG path string with moveto and lineto commands. Uppercase commands indicate absolute coordinates, while lowercase indicate relative coordinates.

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

--------------------------------

### Snap.ajax()

Performs an asynchronous HTTP request (AJAX). Supports GET and POST requests with optional data and callbacks.

```APIDOC
## Snap.ajax(url, postData?, callback?, scope?)

### Description
Provides a simplified interface for making AJAX requests. It can handle GET requests (by omitting `postData`) or POST requests (by providing `postData`). Includes support for a callback function and a scope for that callback.

### Method
STATIC

### Endpoint
N/A

### Parameters
#### Overload 1: POST Request
- **url** (string) - The URL to send the request to.
- **postData** (object or string) - The data to send in the request body. Can be an object or a string.
- **callback** (function) - The function to call upon successful completion of the request. It receives the response text as an argument.
- **scope** (object, optional) - The object to use as the `this` context for the callback function.

#### Overload 2: GET Request
- **url** (string) - The URL to send the request to.
- **callback** (function) - The function to call upon successful completion of the request. It receives the response text as an argument.
- **scope** (object, optional) - The object to use as the `this` context for the callback function.

### Response
#### Success Response (200)
- **XMLHttpRequest** (object) - The XMLHttpRequest object, which can be used for further inspection or control of the request.

### Request Example (POST)
```javascript
Snap.ajax(url, { name: "John" }, function(data) {
    console.log("Response:", data);
}, this);
```

### Request Example (GET)
```javascript
Snap.ajax("/api/data", function(data) {
    console.log("Data received:", data);
});
```
```

--------------------------------

### mina Utility Functions

Utility functions for the `mina` animation engine, including getting the current time, retrieving animations by ID, and a default linear easing function.

```APIDOC
## mina.time()

### Description
Returns the current time in milliseconds, equivalent to `(new Date).getTime()`.

### Method
```
mina.time()
```

### Response
#### Success Response (200)
- **current time** (number) - The current time in milliseconds.

## mina.getById(id)

### Description
Returns an animation object by its unique ID.

### Method
```
mina.getById(id)
```

### Parameters
#### Path Parameters
- **id** (string) - Required - The ID of the animation to retrieve.

### Response
#### Success Response (200)
- **animation object** (object) - See `mina()` for the structure of the animation descriptor.

## mina.linear(n)

### Description
Provides the default linear easing function for animations.

### Method
```
mina.linear(n)
```

### Parameters
#### Path Parameters
- **n** (number) - Required - The input value for the easing function (typically a progress value between 0 and 1).

### Response
#### Success Response (200)
- **eased value** (number) - The eased value, which for linear easing is the same as the input `n`.
```

--------------------------------

### Set and Get SVG Element Attributes (Snap.svg)

Shows how to set multiple attributes on a Snap.svg element using an object or get a specific attribute's value. It supports camelCase, dash-separated names, and prefixed values for modifications.

```javascript
el.attr({
    fill: "#fc0",
    stroke: "#000",
    strokeWidth: 2, // CamelCase...
    "fill-opacity": 0.5, // or dash-separated names
    width: "*=2" // prefixed values
});
console.log(el.attr("fill")); // #fc0
```

--------------------------------

### Element.attr()

Gets or sets attributes on a Snap.svg element. Supports single attribute retrieval or multiple attribute settings via an object.

```APIDOC
## Element.attr(params | name, value?)

### Description
Gets or sets attributes for a Snap.svg element. Can be used to set multiple attributes at once using an object, or to get/set a single attribute by name.

### Method
GET/SET

### Endpoint
N/A (Instance Method)

### Parameters
#### Overload 1: Setting multiple attributes
- **params** (object) - An object containing key-value pairs of attributes to set. Example: `{ fill: "#f00", stroke: "#000" }`.

#### Overload 2: Get/Set single attribute
- **name** (string) - The name of the attribute to get or set.
- **value** (any, optional) - The value to set for the attribute. If omitted, the current value of the attribute is returned.

### Response
#### Success Response (200)
- **Element** (object) - When setting attributes, returns the current element for chaining.
- **string** (string) - When getting a single attribute, returns the value of that attribute.

### Request Example (Setting Multiple Attributes)
```javascript
el.attr({
    fill: "#fc0",
    stroke: "#000",
    "stroke-width": 2,
    "fill-opacity": 0.5
});
```

### Request Example (Getting/Setting Single Attribute)
```javascript
console.log(el.attr("fill")); // Get current fill color
el.attr("stroke", "blue"); // Set stroke color to blue
```

### Response Example (Getting Attribute)
```json
"#fc0"
```
```

--------------------------------

### Snap.svg: Animate Element Attributes

This example shows how to animate an element's attributes using Snap.svg. It defines a rectangle and animates its 'x' attribute over a specified duration. It also provides an equivalent using the more direct `Snap.animate` function.

```javascript
var rect = Snap().rect(0, 0, 10, 10);
Snap.animate(0, 10, function (val) {
    rect.attr({
        x: val
    });
}, 1000);
// in given context is equivalent to
rect.animate({x: 10}, 1000);
```

--------------------------------

### Get Bounding Box of an Element (Snap.svg)

Explains how to retrieve the bounding box information for a Snap.svg element. The returned object contains detailed metrics like center coordinates, dimensions, and path data.

```javascript
// Example usage (assuming 'el' is a Snap.svg element)
var bbox = el.getBBox();
console.log(bbox.width, bbox.height, bbox.cx, bbox.cy);
```

--------------------------------

### Get Element by Point (Snap.svg)

Demonstrates how to find the topmost SVG element at a specific coordinate. The returned element can then be manipulated, for example, by changing its stroke color.

```javascript
Snap.getElementByPoint(mouseX, mouseY).attr({stroke: "#f00"});
```

--------------------------------

### Matrix Construction

Methods for creating and initializing matrices.

```APIDOC
## Snap.Matrix()

### Description
Matrix constructor. Extend on your own risk. To create matrices use Snap.matrix.

### Method
N/A (Constructor)

### Endpoint
N/A

## Snap.matrix(...)

### Description
Utility method to return a matrix based on the given parameters.

### Method
N/A (Static method)

### Endpoint
N/A

### Parameters
#### Path Parameters
- **a, b, c, d, e, f** (number) - Parameters defining the matrix.
OR
- **svgMatrix** (SVGMatrix) - An existing SVGMatrix object.

### Returns
- **object** - A new Matrix object.
```

--------------------------------

### Set.attr

Provides an interface equivalent to `Element.attr` for Sets. It allows getting or setting attributes on all elements within the Set. When getting attributes, it typically returns the attribute value of the first element. When setting, it applies the attribute to all elements.

```javascript
Set.attr(params)
// Example: set.attr({ fill: "red", "stroke-width": 2 });
```

--------------------------------

### Element Utility and Creation Methods

Methods for creating reusable elements like `<use>`, `<pattern>`, and `<marker>`, cloning elements, moving elements to defs, and managing data.

```APIDOC
## Element.use()

### Description
Creates a `<use>` element linked to the current element.

### Method
POST

### Endpoint
N/A (Method on Element object)

### Parameters
None

### Request Example
```javascript
const useElement = originalElement.use();
```

### Response
#### Success Response (200)
- **Element** (_Element_) - The newly created `<use>` element.
```

```APIDOC
## Element.clone()

### Description
Creates a clone of the element and inserts it immediately after the original element.

### Method
POST

### Endpoint
N/A (Method on Element object)

### Parameters
None

### Request Example
```javascript
const clonedElement = originalElement.clone();
```

### Response
#### Success Response (200)
- **Element** (_Element_) - The cloned element.
```

```APIDOC
## Element.toDefs()

### Description
Moves the current element to the shared `<defs>` area of the SVG.

### Method
POST

### Endpoint
N/A (Method on Element object)

### Parameters
None

### Request Example
```javascript
const elementInDefs = myElement.toDefs();
```

### Response
#### Success Response (200)
- **Element** (_Element_) - The element, now located in the `<defs>` section.
```

```APIDOC
## Element.toPattern(x, y, width, height)

### Description
Creates a `<pattern>` element from the current element. Requires specifying the pattern's bounding box.

### Method
POST

### Endpoint
N/A (Method on Element object)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **x** (_string_ or _number_) - The x-coordinate of the pattern's bounding box.
- **y** (_string_ or _number_) - The y-coordinate of the pattern's bounding box.
- **width** (_string_ or _number_) - The width of the pattern's bounding box.
- **height** (_string_ or _number_) - The height of the pattern's bounding box.

### Request Example
```javascript
const patternElement = myElement.toPattern(0, 0, 10, 10);

// Usage example:
const circle = paper.circle(200, 200, 100);
circle.attr({ fill: patternElement });
```

### Response
#### Success Response (200)
- **Element** (_Element_) - The created `<pattern>` element.
```

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

### Description
Creates a `<marker>` element from the current element. Requires specifying the bounding rect and a reference point.

### Method
POST

### Endpoint
N/A (Method on Element object)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **x** (_number_) - The x-coordinate of the marker's bounding box.
- **y** (_number_) - The y-coordinate of the marker's bounding box.
- **width** (_number_) - The width of the marker's bounding box.
- **height** (_number_) - The height of the marker's bounding box.
- **refX** (_number_) - The x-coordinate of the marker's reference point.
- **refY** (_number_) - The y-coordinate of the marker's reference point.

### Request Example
```javascript
const markerElement = myPath.marker(0, 0, 10, 10, 5, 5);

// Usage example:
myPath.attr({ 'marker-end': markerElement });
```

### Response
#### Success Response (200)
- **Element** (_Element_) - The created `<marker>` element.
```

```APIDOC
## Element.data(key, [value])

### Description
Adds or retrieves a value associated with a key on the element. This is distinct from `data-*` attributes.

### Method
GET or POST

### Endpoint
N/A (Method on Element object)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **key** (_string_) - The key to store or retrieve data.
- **value** (_any_) - Optional. The value to associate with the key.

### Request Example
```javascript
// Set data
element.data('userType', 'admin');

// Get data
const userType = element.data('userType'); 
```

### Response
#### Success Response (200)
- **Element** (_object_) - The element itself (when a value is provided, for chaining).
- **any** (_any_) - The retrieved value (when no value is provided).
```

--------------------------------

### Snap.url

Wraps a given path string into the CSS url() format.

```APIDOC
## Snap.url(value)

### Description
Wraps a given path string into the CSS url() format.

### Method
Call

### Parameters
#### Path Parameters
- **value** (string) - Required - The path string to wrap.

### Returns
- **string** - The wrapped path string (e.g., "url('<path>')").
```

--------------------------------

### Element.getTotalLength

Gets the total length of a path element.

```APIDOC
## Element.getTotalLength()

### Description
Returns the length of the path in pixels (only works for `path` elements).

### Method
GET

### Endpoint
`/element/{id}/totalLength`

### Parameters
No direct parameters, operates on the element instance.

### Response
#### Success Response (200)
- **length** (number) - The total length of the path element in pixels.

### Response Example
```json
{
  "length": 150.75
}
```
```

--------------------------------

### Snap.path.getSubpath

Extracts a segment of an SVG path defined by start and end lengths.

```APIDOC
## Snap.path.getSubpath(path, from, to)

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

### Method
GET

### Endpoint
`/path/getSubpath`

### Parameters
#### Path Parameters
- **path** (string) - Required - SVG path string
- **from** (number) - Required - The starting length in pixels from the start of the path.
- **to** (number) - Required - The ending length in pixels from the start of the path.

### Response
#### Success Response (200)
- **pathString** (string) - The SVG path string definition for the extracted segment.

### Response Example
```json
{
  "pathString": "M10,10L20,20"
}
```
```

--------------------------------

### Snap.ajax()

Asynchronously loads data from an external source using HTTP requests.

```APIDOC
## Snap.ajax(url, postData, callback, type)

Asynchronously loads data from an external source.

### Description
This method facilitates making AJAX requests to fetch data from a server. It can handle both GET and POST requests and provides a callback for processing the response.

### Parameters
- **url** (String) - The URL to request.
- **postData** (Object, optional) - Data to send with a POST request.
- **callback** (Function, optional) - The function to execute when the request completes successfully.
- **type** (String, optional) - The HTTP method ('GET' or 'POST', defaults to 'GET').

### Example
```javascript
Snap.ajax("/api/data", function(data) {
    console.log(data);
}, "json");

Snap.ajax("/api/submit", { value: 10 }, function(response) {
    console.log("Success:", response);
}, "POST");
```
```

--------------------------------

### Element.transform()

Gets or sets the transformation (e.g., translate, rotate, scale) of a Snap.svg element.

```APIDOC
## Element.transform(tstr)

### Description
Manages the transformation of a Snap.svg element. It can be used to get the current transformation string or to apply a new transformation.

### Method
GET/SET

### Endpoint
N/A (Instance Method)

### Parameters
#### Path Parameters
- **tstr** (string, optional) - A string defining the transformation(s) to apply (e.g., 'T10-20', 'R30', 'S2'). If omitted, the current transformation string is returned.

### Response
#### Success Response (200)
- **string** - The current transformation string if `tstr` is omitted.
- **Element** - The current element if `tstr` is provided, allowing for chaining.

### Request Example (Setting Transformation)
```javascript
// Translate the element 10 units right and 20 units down
el.transform('T10-20');

// Rotate the element by 45 degrees
el.transform('R45');

// Scale the element by 2
el.transform('S2');

// Combine transformations
el.transform('T10-20R45S2');
```

### Request Example (Getting Transformation)
```javascript
var currentTransform = el.transform();
console.log(currentTransform); // e.g., "translate(10,-20)rotate(45)scale(2)"
```
```

--------------------------------

### Extend Snap.svg with Plugins (Snap.svg)

Shows the structure for creating Snap.svg plugins. The provided function receives core Snap.svg objects, allowing extension of Snap, Element, and Paper prototypes with new methods.

```javascript
Snap.plugin(function (Snap, Element, Paper, global, Fragment) {
    Snap.newmethod = function () {};
    Element.prototype.newmethod = function () {};
    Paper.prototype.newmethod = function () {};
});
```

--------------------------------

### Snap.svg Element Creation Utilities (use, clone, toDefs)

These methods provide shortcuts for creating reusable or modified elements. use() creates a <use> element referencing the current element. clone() duplicates the element and inserts it after the original. toDefs() moves the element to the shared <defs> section for reuse.

```javascript
## Element.use() ⚓ ➭
Creates a `<use>` element linked to the current element 
**Returns:** _Element_ the `<use>` element
## Element.clone() ⚓ ➭
Creates a clone of the element and inserts it after the element 
**Returns:** _Element_ the clone
## Element.toDefs() ⚓ ➭
Moves element to the shared `<defs>` area 
**Returns:** _Element_ the element
```

--------------------------------

### Element Manipulation

Methods for manipulating SVG elements, including removing data, getting SVG code, and converting elements.

```APIDOC
## Element.removeData([key])

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

### Parameters
  1. key _string_ - The key of the data to remove.

### Returns
_object_ - The element itself.

## Element.outerSVG()

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

### Returns
_string_ - SVG code for the element.

## Element.toString()

Alias for Element.outerSVG.

### Returns
_string_ - SVG code for the element.

## Element.innerSVG()

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

### Returns
_string_ - SVG code for the element's contents.
```

--------------------------------

### Matrix Transformations

Methods for creating and manipulating transformation matrices.

```APIDOC
## Matrix.add(a, b, c, d, e, f)

Adds the given matrix to the existing one.

### Parameters
  1. a _number_
  2. b _number_
  3. c _number_
  4. d _number_
  5. e _number_
  6. f _number_

## Matrix.add(matrix)

Adds the given matrix to the existing one.

### Parameters
  1. matrix _object_ - The matrix to add.

## Matrix.multLeft(a, b, c, d, e, f)

Multiplies a passed affine transform to the left: M * this.

### Parameters
  1. a _number_
  2. b _number_
  3. c _number_
  4. d _number_
  5. e _number_
  6. f _number_

## Matrix.multLeft(matrix)

Multiplies a passed affine transform to the left: M * this.

### Parameters
  1. matrix _object_ - The matrix to multiply with.

## Matrix.invert()

Returns an inverted version of the matrix.

### Returns
_object_ - The inverted matrix.

## Matrix.clone()

Returns a copy of the matrix.

### Returns
_object_ - A clone of the matrix.

## Matrix.translate(x, y)

Translates the matrix.

### Parameters
  1. x _number_ - Horizontal offset distance.
  2. y _number_ - Vertical offset distance.

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

Scales the matrix.

### Parameters
  1. x _number_ - Amount to be scaled, with `1` resulting in no change.
  2. y _number_ - Amount to scale along the vertical axis. (Otherwise `x` applies to both axes.)
  3. cx _number_ - Horizontal origin point from which to scale.
  4. cy _number_ - Vertical origin point from which to scale.

*Default cx, cy is the middle point of the element.*

## Matrix.rotate(a, x, y)

Rotates the matrix.

### Parameters
  1. a _number_ - The angle of rotation.
  2. x _number_ - The x-coordinate of the center of rotation.
  3. y _number_ - The y-coordinate of the center of rotation.
```

--------------------------------

### Snap.plugin()

Allows developers to extend Snap.svg by adding new methods to Snap, Element, or Paper prototypes.

```APIDOC
## Snap.plugin(f)

### Description
Enables the creation of plugins to extend Snap.svg's functionality. The provided function receives core Snap.svg objects, allowing modification of their prototypes or the Snap object itself.

### Method
STATIC

### Endpoint
N/A

### Parameters
#### Path Parameters
- **f** (function) - The plugin function. It receives `Snap`, `Element`, `Paper`, `global`, and `Fragment` as arguments.

### Request Example
```javascript
Snap.plugin(function (Snap, Element, Paper, global, Fragment) {
    // Add a new method to Snap
    Snap.customMethod = function() {
        console.log("Custom Snap method called");
    };

    // Add a new method to all Snap Elements
    Element.prototype.customElementMethod = function() {
        console.log("Custom element method called on type:", this.type);
    };

    // Add a new method to the Paper object
    Paper.prototype.customPaperMethod = function() {
        console.log("Custom paper method called");
    };
});

// Usage after plugin is registered:
Snap.customMethod();
var rect = paper.rect(0,0,10,10);
rect.customElementMethod();
paper.customPaperMethod();
```
```

--------------------------------

### Snap.format

Replaces placeholders in a string with corresponding values from an object.

```APIDOC
## Snap.format(token, json)

### Description
Replaces construction of type `{<name>}` to the corresponding argument.

### Method
Call

### Parameters
#### Path Parameters
- **token** (string) - Required - The string containing placeholders.
- **json** (object) - Required - An object whose properties are used as replacements.

### Request Example
```javascript
// 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,
    dim: {
        width: 40,
        height: 50,
        "negative width": -40
    }
}));
```

### Returns
- **string** - The formatted string with placeholders replaced.
```

--------------------------------

### Matrix.y() - Get transformed Y coordinate

Calculates and returns the y-coordinate of a given point after applying the matrix transformations. This complements Matrix.x() for complete coordinate transformation.

```javascript
var transformedY = matrix.y(originalX, originalY);
```

--------------------------------

### Snap.set() - Create and Initialize Sets

Creates a new Snap.svg set, which can be empty or pre-filled with provided elements. This is fundamental for grouping and manipulating multiple SVG elements as a single unit.

```javascript
var r = paper.rect(0, 0, 10, 10),
    s1 = Snap.set(), // empty set
    s2 = Snap.set(r, paper.circle(100, 100, 20)); // prefilled set
```

--------------------------------

### Get SVG Code from Paper in Snap.svg

Returns the SVG code representation of the current Paper object as a string. This is useful for exporting or inspecting the SVG content.

```javascript
var svgString = paper.toString();
```

--------------------------------

### Color Conversion Functions

Functions for converting colors between different formats (HSB, HSL, RGB) and parsing color strings.

```APIDOC
## Snap.hsb(h, s, b)

### Description
Converts HSB values to a hex representation of the color.

### Method
`Snap.hsb`

### Parameters
#### Path Parameters
- **h** (number) - Required - hue
- **s** (number) - Required - saturation
- **b** (number) - Required - value or brightness

### Response
#### Success Response (200)
- **hex** (string) - hex representation of the color

## Snap.hsl(h, s, l)

### Description
Converts HSL values to a hex representation of the color.

### Method
`Snap.hsl`

### Parameters
#### Path Parameters
- **h** (number) - Required - hue
- **s** (number) - Required - saturation
- **l** (number) - Required - luminosity

### Response
#### Success Response (200)
- **hex** (string) - hex representation of the color

## Snap.rgb(r, g, b)

### Description
Converts RGB values to a hex representation of the color.

### Method
`Snap.rgb`

### Parameters
#### Path Parameters
- **r** (number) - Required - red
- **g** (number) - Required - green
- **b** (number) - Required - blue

### Response
#### Success Response (200)
- **hex** (string) - hex representation of the color

## Snap.color(clr)

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

### Method
`Snap.color`

### Parameters
#### Path Parameters
- **clr** (string) - Required - color string in one of the supported formats (see Snap.getRGB)

### Response
#### Success Response (200)
- **r** (number) - red
- **g** (number) - green
- **b** (number) - blue
- **hex** (string) - color in HTML/CSS format: #••••••
- **error** (boolean) - `true` if string can't be parsed
- **h** (number) - hue
- **s** (number) - saturation
- **v** (number) - value (brightness)
- **l** (number) - lightness

## Snap.hsb2rgb(h, s, v)

### Description
Converts HSB values to an RGB object.

### Method
`Snap.hsb2rgb`

### Parameters
#### Path Parameters
- **h** (number) - Required - hue
- **s** (number) - Required - saturation
- **v** (number) - Required - value or brightness

### Response
#### Success Response (200)
- **r** (number) - red
- **g** (number) - green
- **b** (number) - blue
- **hex** (string) - color in HTML/CSS format: #••••••

## Snap.hsl2rgb(h, s, l)

### Description
Converts HSL values to an RGB object.

### Method
`Snap.hsl2rgb`

### Parameters
#### Path Parameters
- **h** (number) - Required - hue
- **s** (number) - Required - saturation
- **l** (number) - Required - luminosity

### Response
#### Success Response (200)
- **r** (number) - red
- **g** (number) - green
- **b** (number) - blue
- **hex** (string) - color in HTML/CSS format: #••••••

## Snap.rgb2hsb(r, g, b)

### Description
Converts RGB values to an HSB object.

### Method
`Snap.rgb2hsb`

### Parameters
#### Path Parameters
- **r** (number) - Required - red
- **g** (number) - Required - green
- **b** (number) - Required - blue

### Response
#### Success Response (200)
- **h** (number) - hue
- **s** (number) - saturation
- **b** (number) - brightness

## Snap.rgb2hsl(r, g, b)

### Description
Converts RGB values to an HSL object.

### Method
`Snap.rgb2hsl`

### Parameters
#### Path Parameters
- **r** (number) - Required - red
- **g** (number) - Required - green
- **b** (number) - Required - blue

### Response
#### Success Response (200)
- **h** (number) - hue
- **s** (number) - saturation
- **l** (number) - luminosity
```

--------------------------------

### Matrix.x() - Get transformed X coordinate

Calculates and returns the x-coordinate of a given point after applying the matrix transformations. This is useful for understanding how points are affected by transformations.

```javascript
var transformedX = matrix.x(originalX, originalY);
```

--------------------------------

### Matrix Properties and Manipulation

Methods for accessing matrix properties and transformations.

```APIDOC
## Matrix.determinant()

### Description
Finds the determinant of the given matrix.

### Method
N/A (Method of Matrix object)

### Endpoint
N/A

### Returns
- **number** - The determinant of the matrix.

## Matrix.split()

### Description
Splits the matrix into primitive transformations.

### Method
N/A (Method of Matrix object)

### Endpoint
N/A

### Returns
- **object** - An object containing the primitive transformations:
  - **dx** (number) - Translation by x.
  - **dy** (number) - Translation by y.
  - **scalex** (number) - Scale by x.
  - **scaley** (number) - Scale by y.
  - **shear** (number) - Shear value.
  - **rotate** (number) - Rotation in degrees.
  - **isSimple** (boolean) - Indicates if it can be represented via simple transformations.

## Matrix.toTransformString()

### Description
Returns a transform string that represents the given matrix.

### Method
N/A (Method of Matrix object)

### Endpoint
N/A

### Returns
- **string** - The transform string.
```

--------------------------------

### Snap.svg Overview

Snap.svg provides a comprehensive API for working with SVG. The top-level 'Snap' object is the entry point for many functionalities, including creating SVG canvases, manipulating elements, and handling animations.

```APIDOC
## Snap(...)

Creates a drawing surface or wraps an existing SVG element.

### Description
This function serves as the primary way to initialize Snap.svg. It can be used to create a new SVG canvas within a specified DOM element or to attach Snap.svg functionality to an existing SVG element.

### Method
`Snap(param)`

### Parameters
- **param** (String|Node|Element) - A CSS selector string, a DOM element, or a Snap.Element to specify the container for the SVG or the SVG element to wrap.

### Example
```javascript
// Create a new SVG canvas within a div with id 'svg-container'
var svg = Snap("#svg-container");

// Wrap an existing SVG element with id 'my-svg'
var wrappedSvg = Snap("#my-svg");
```
```

--------------------------------

### Get Current Time in Snap.svg (Mina)

A utility function within the 'mina' namespace that returns the current time in milliseconds. It's equivalent to `(new Date).getTime()`.

```javascript
function getCurrentTime() {
    return mina.time();
}
```

--------------------------------

### Get Gradient Stops

Retrieves the array of gradient stop elements from a gradient object. This is exclusively applicable to gradients and allows inspection or modification of stop colors and positions.

```javascript
var stops = gradientElement.stops();
```

--------------------------------

### Matrix Transformations

Methods for skewing and transforming matrices.

```APIDOC
## Matrix.skewX(x)

### Description
Skews the matrix along the x-axis.

### Method
N/A (Method of Matrix object)

### Endpoint
N/A

### Parameters
#### Path Parameters
- **x** (number) - Required - Angle to skew along the x-axis (in degrees).

### Response
#### Success Response (200)
N/A

## Matrix.skewY(y)

### Description
Skews the matrix along the y-axis.

### Method
N/A (Method of Matrix object)

### Endpoint
N/A

### Parameters
#### Path Parameters
- **y** (number) - Required - Angle to skew along the y-axis (in degrees).

### Response
#### Success Response (200)
N/A

## Matrix.skew(y, x)

### Description
Skews the matrix.

### Method
N/A (Method of Matrix object)

### Endpoint
N/A

### Parameters
#### Path Parameters
- **y** (number) - Required - Angle to skew along the y-axis (in degrees).
- **x** (number) - Required - Angle to skew along the x-axis (in degrees).

### Response
#### Success Response (200)
N/A
```

--------------------------------

### Get SVG as Data URI in Snap.svg

Returns the SVG code for the Paper object as a Data URI string. This format can be directly used in image tags or CSS backgrounds.

```javascript
var dataUri = paper.toDataURL();
```

--------------------------------

### Create SVG Element with Attributes (Snap.svg)

Illustrates creating a new SVG element on a Snap.svg paper. It shows equivalent methods using paper.circle, paper.el, and paper.el with attributes.

```javascript
var c = paper.circle(10, 10, 10); // is the same as...
var c = paper.el("circle").attr({
    cx: 10,
    cy: 10,
    r: 10
});
// and the same as
var c = paper.el("circle", {
    cx: 10,
    cy: 10,
    r: 10
});
```

--------------------------------

### Element Touch Events

Methods for adding and removing touch event listeners like touchstart, touchmove, touchend, and touchcancel.

```APIDOC
## Element.touchstart(handler)

### Description
Adds a touchstart event handler to the element.

### Method
POST

### Endpoint
/element/touchstart

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **handler** (function) - Required - The function to execute when a touch starts on the element.

### Request Example
```json
{
  "handler": "function(event) { ... }"
}
```

### Response
#### Success Response (200)
- **Element** (object) - Returns the element itself for chaining.

#### Response Example
```json
{
  "Element": "[element_object]"
}
```

## Element.untouchstart(handler)

### Description
Removes a touchstart event handler from the element.

### Method
DELETE

### Endpoint
/element/untouchstart

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **handler** (function) - Required - The handler function to remove.

### Request Example
```json
{
  "handler": "function(event) { ... }"
}
```

### Response
#### Success Response (200)
- **Element** (object) - Returns the element itself for chaining.

#### Response Example
```json
{
  "Element": "[element_object]"
}
```

## Element.touchmove(handler)

### Description
Adds a touchmove event handler to the element.

### Method
POST

### Endpoint
/element/touchmove

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **handler** (function) - Required - The function to execute when a touch moves on the element.

### Request Example
```json
{
  "handler": "function(event) { ... }"
}
```

### Response
#### Success Response (200)
- **Element** (object) - Returns the element itself for chaining.

#### Response Example
```json
{
  "Element": "[element_object]"
}
```

## Element.untouchmove(handler)

### Description
Removes a touchmove event handler from the element.

### Method
DELETE

### Endpoint
/element/untouchmove

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **handler** (function) - Required - The handler function to remove.

### Request Example
```json
{
  "handler": "function(event) { ... }"
}
```

### Response
#### Success Response (200)
- **Element** (object) - Returns the element itself for chaining.

#### Response Example
```json
{
  "Element": "[element_object]"
}
```

## Element.touchend(handler)

### Description
Adds a touchend event handler to the element.

### Method
POST

### Endpoint
/element/touchend

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **handler** (function) - Required - The function to execute when a touch ends on the element.

### Request Example
```json
{
  "handler": "function(event) { ... }"
}
```

### Response
#### Success Response (200)
- **Element** (object) - Returns the element itself for chaining.

#### Response Example
```json
{
  "Element": "[element_object]"
}
```

## Element.untouchend(handler)

### Description
Removes a touchend event handler from the element.

### Method
DELETE

### Endpoint
/element/untouchend

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **handler** (function) - Required - The handler function to remove.

### Request Example
```json
{
  "handler": "function(event) { ... }"
}
```

### Response
#### Success Response (200)
- **Element** (object) - Returns the element itself for chaining.

#### Response Example
```json
{
  "Element": "[element_object]"
}
```

## Element.touchcancel(handler)

### Description
Adds a touchcancel event handler to the element.

### Method
POST

### Endpoint
/element/touchcancel

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **handler** (function) - Required - The function to execute when a touch event is canceled.

### Request Example
```json
{
  "handler": "function(event) { ... }"
}
```

### Response
#### Success Response (200)
- **Element** (object) - Returns the element itself for chaining.

#### Response Example
```json
{
  "Element": "[element_object]"
}
```

## Element.untouchcancel(handler)

### Description
Removes a touchcancel event handler from the element.

### Method
DELETE

### Endpoint
/element/untouchcancel

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **handler** (function) - Required - The handler function to remove.

### Request Example
```json
{
  "handler": "function(event) { ... }"
}
```

### Response
#### Success Response (200)
- **Element** (object) - Returns the element itself for chaining.

#### Response Example
```json
{
  "Element": "[element_object]"
}
```
```

--------------------------------

### Transform an SVG Element (Snap.svg)

Covers the `transform` method for applying transformations (like translate, rotate, scale) to a Snap.svg element. It can be used to get or set the current transformation string.

```javascript
// Set transformation
el.transform("t100,50 r30 s2");

// Get transformation
var currentTransform = el.transform();
```

--------------------------------

### Add Click Handler to SVG Element (Snap.svg)

Demonstrates how to get the DOM node of a Snap.svg element and attach a click event handler to modify its attributes. This is useful for interactive SVG elements.

```javascript
var c = paper.circle(10, 10, 10);
c.node.onclick = function () {
    c.attr("fill", "red");
};
```

--------------------------------

### Color Utility API

API endpoints for accessing predefined color palettes from Material UI and Flat UI, and for importing Material UI colors.

```APIDOC
## Snap.mui

### Description
An object containing Material UI color constants.

### Method
Static Property

### Endpoint
N/A

### Parameters
None

### Request Example
```javascript
var deepPurpleColor = Snap.mui.deeppurple;
var amberColor = Snap.mui.amber[600]; // Accessing specific shades
```

### Response
#### Success Response (200)
- **object** - An object containing Material UI color definitions.

### Response Example
```json
{
  "red": "#f44336",
  "pink": "#e91e63",
  // ... other colors
}
```

## Snap.flat

### Description
An object containing Flat UI color constants.

### Method
Static Property

### Endpoint
N/A

### Parameters
None

### Request Example
```javascript
var carrotColor = Snap.flat.carrot;
var wetAsphaltColor = Snap.flat.wetasphalt;
```

### Response
#### Success Response (200)
- **object** - An object containing Flat UI color definitions.

### Response Example
```json
{
  "clouds": "#ecf0f1",
  "asbestos": "#7f8c8d",
  // ... other colors
}
```

## Snap.importMUIColors()

### Description
Imports Material UI colors into the global scope, making them directly accessible without the `Snap.mui.` prefix.

### Method
Static Method

### Endpoint
N/A

### Parameters
None

### Request Example
```javascript
Snap.importMUIColors();
// Now you can use colors like:
// Snap().rect(0, 0, 10, 10).attr({fill: deeppurple, stroke: amber[600]});
```

### Response
#### Success Response (200)
- **undefined** - This function does not return a value, but modifies the global scope.

### Response Example
```json
// No direct JSON response
```
```

--------------------------------

### Snap.url() - Wrap Path

Wraps a given path string into a `url()` format, typically used for SVG background images or gradients. It takes a single string argument representing the path.

```javascript
Snap.url("path/to/image.png"); // Returns "url('path/to/image.png')"
```
Tokens:
Raw