`properties` _(optional)_ >Object to set the properties of the isometric canvas | Property | Type | Default value | Description | | --------------- | -------------------- | -------------- | ------------------------------------------------- | | container | HTMLElement or string | "body" | The DOM element or the query selector of the element in which the isometric will be inserted. This parameter should not be provided in Node environments | | id | string | random | Sets the id of the isometric canvas. It also sets the id of the native SVG element | | backgroundColor | string | "white" | Sets the background color of the isometric canvas | | scale | number | 1 | Sets the scale multiplier of each isometric unit | | height | number | 480 | Sets the height of the isometric canvas | | width | number | 640 | Sets the width of the isometric canvas |

>All the instance methods (excluding `getElement`, `getChildByIndex`, `getChildById`, and `getSVGCode`) return the same instance, so they are chainable. ```javascript getElement() ``` >Returns the native `SVG` element ```javascript getSVGCode() ``` >Returns the HTML code of the `SVG` element ```javascript addChild(child) ``` >Adds a child to the isometric canvas | Parameter | Type | | --------------- | ------------- | | child | Any isometric element | ```javascript addChildren(child, child, child...) ``` >Adds multiple children to the isometric canvas | Parameter | Type | | --------------- | ------------- | | child | Any isometric element | ```javascript getChildByIndex(index) ``` >Gets a child taking into account its index | Parameter | Type | | --------------- | ------------- | | index | number | ```javascript getChildById(id) ``` >Gets a child taking into account its id | Parameter | Type | | --------------- | ------------- | | id | string | ```javascript removeChild(child) ``` >Removes a child from the isometric canvas | Parameter | Type | | --------------- | ------------- | | child | Any isometric element | ```javascript removeChildren(child, child, child...) ``` >Removes multiple children from the isometric canvas | Parameter | Type | | --------------- | ------------- | | child | Any isometric element | ```javascript removeChildByIndex(index) ``` >Removes a child taking into account its index in the elements tree | Parameter | Type | | --------------- | ------------- | | index | number | ```javascript removeChildById(id) ``` >Removes a child taking into account its id | Parameter | Type | | --------------- | ------------- | | id | string | ```javascript setChildIndex(child, index) ``` >Change the index of a child of the isometric canvas. This method also changes the index of the native elements inside the SVG. | Parameter | Type | | --------------- | ------------- | | child | Any isometric element | | index | number | ```javascript bringChildToFront(child) ``` >Change the index of a child of the isometric canvas bringing it to the front of the rest of the children. This method also changes the index of the native elements inside the SVG. | Parameter | Type | | --------------- | ------------- | | child | Any isometric element | ```javascript sendChildToBack(child) ``` >Change the index of a child of the isometric canvas sending it to the back of the rest of the children. This method also changes the index of the native elements inside the SVG. | Parameter | Type | | --------------- | ------------- | | child | Any isometric element | ```javascript bringChildForward(child) ``` >Change the index of a child of the isometric canvas bringing it to the front of the child above it. This method also changes the index of the native elements inside the SVG. | Parameter | Type | | --------------- | ------------- | | child | Any isometric element | ```javascript sendChildBackward(child) ``` >Change the index of a child of the isometric canvas sending it to the back of the child below it. This method also changes the index of the native elements inside the SVG. | Parameter | Type | | --------------- | ------------- | | child | Any isometric element | ```javascript update() ``` >Updates the entire isometric canvas and its children ```javascript clear() ``` >Cleans the isometric canvas (removes all the children from it and all the native SVG elements from the SVG) ```javascript pauseAnimations() ``` >Pause all the animations (not compatible with Internet Explorer) ```javascript resumeAnimations() ``` >Resume all the animations (not compatible with Internet Explorer) ```javascript addEventListener(type, callback, [useCapture]) ``` >Sets up a function that will be called whenever the specified event is delivered to the isometric canvas (the SVG element) | Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean | ```javascript removeEventListener(type, callback, [useCapture]) ``` >Removes from the isometric canvas (the SVG element) an event listener previously registered with `addEventListener` | Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean |

| Property | Type | Description | | --------------- | -------- | ----------------------------------------------------------------- | | id | string | Gets and sets the id of the isometric canvas. This property also sets the id of the native `SVG` element | | backgroundColor | string | Gets and sets the background color of the isometric canvas | | scale | number | Gets and sets the multiplier scale of the isometric canvas | | height | number | Gets and sets the height of the isometric canvas | | width | number | Gets and sets the width of the isometric canvas | | children | array | Gets an array of the isometric canvas children elements | | animated | boolean | Gets if the SVG is animations are paused or are running |

`properties` _(optional)_ >Object to set the properties of the isometric canvas | Property | Type | Default value | Description | | --------------- | -------------------- | -------------- | ------------------------------------------------------------ | | id | string | random | Sets the id of the isometric group. It also sets the id of the native SVG element | | right | number | 0 | Sets the right isometric coordinates of the isometric group | | left | number | 0 | Sets the left isometric coordinates of the isometric group | | top | number | 0 | Sets the top isometric coordinates of the isometric group |

>All the instance methods (excluding `getChildByIndex`, `getChildById`, and `getElement`) return the same instance, so they are chainable. ```javascript getElement() ``` >Returns the native `g` element ```javascript addChild(child) ``` >Adds a child to the isometric group | Parameter | Type | | --------------- | ------------- | | child | Any isometric element | ```javascript addChildren(child, child, child...) ``` >Adds multiple children to the isometric group | Parameter | Type | | --------------- | ------------- | | child | Any isometric element | ```javascript getChildByIndex(index) ``` >Gets a child taking into account its index | Parameter | Type | | --------------- | ------------- | | index | number | ```javascript getChildById(id) ``` >Gets a child taking into account its id | Parameter | Type | | --------------- | ------------- | | id | string | ```javascript removeChild(child) ``` >Removes a child from the isometric group | Parameter | Type | | --------------- | ------------- | | child | Any isometric element | ```javascript removeChildren(child, child, child...) ``` >Removes multiple children from the isometric group | Parameter | Type | | --------------- | ------------- | | child | Any isometric element | ```javascript removeChildByIndex(index) ``` >Removes a child taking into account its index in the elements tree | Parameter | Type | | --------------- | ------------- | | index | number | ```javascript removeChildById(id) ``` >Removes a child taking into account its id | Parameter | Type | | --------------- | ------------- | | id | string | ```javascript setChildIndex(child, index) ``` >Change the index of a child of the isometric group. This method also changes the index of the native elements inside the `g` element. | Parameter | Type | | --------------- | ------------- | | child | Any isometric element | | index | number | ```javascript bringChildToFront(child) ``` >Change the index of a child of the isometric group bringing it to the front of the rest of the children. This method also changes the index of the native elements inside the `g` element. | Parameter | Type | | --------------- | ------------- | | child | Any isometric element | ```javascript sendChildToBack(child) ``` >Change the index of a child of the isometric group sending it to the back of the rest of the children. This method also changes the index of the native elements inside the `g` element. | Parameter | Type | | --------------- | ------------- | | child | Any isometric element | ```javascript bringChildForward(child) ``` >Change the index of a child of the isometric group bringing it to the front of the child above it. This method also changes the index of the native elements inside the `g` element. | Parameter | Type | | --------------- | ------------- | | child | Any isometric element | ```javascript sendChildBackward(child) ``` >Change the index of a child of the isometric group sending it to the back of the child below it. This method also changes the index of the native elements inside the `g` element. | Parameter | Type | | --------------- | ------------- | | child | Any isometric element | ```javascript update() ``` >Updates the entire isometric group and its children ```javascript clear() ``` >Cleans the isometric group (removes all the children from it and all the native SVG elements from the `g` element) ```javascript addEventListener(type, callback, [useCapture]) ``` >Sets up a function that will be called whenever the specified event is delivered to the isometric group (the `g` element) | Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean | ```javascript removeEventListener(type, callback, [useCapture]) ``` >Removes from the isometric group (the `g` element) an event listener previously registered with `addEventListener` | Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean |

| Property | Type | Description | | --------------- | -------- | -------------------------------------------------------------------- | | id | string | Gets and sets the id of the isometric group. This property also sets the id of the native `SVG` element | | right | number | Gets and sets the right isometric coordinates of the isometric group | | left | number | Gets and sets the left isometric coordinates of the isometric group | | top | number | Gets and sets the top isometric coordinates of the isometric group | | children | array | Gets an array of the isometric group children elements | | drag \* | PlaneView (`string`) / false | Gets an sets the dragging plane of the isometric group | | bounds | object / false | Gets an sets the boundaries of the isometric group position | >\* When dragging an isometric group, the events `dragstart`, `drag` and `dragend` will be fired in that order. These events will be `CustomEvents` with a `detail` property containing the `right`, `left` and `top` properties that the isometric group will receive. The `drag` event can be prevented using `preventDefault` so, if it is prevented, the isometric group will not change its position when it is dragged. `planeView values` >"TOP" | "FRONT" | "SIDE" | false `bounds properties` >Object to set the boundaries of the isometric group position. If it is set as false the isometric group will not have boundaries. | Property | Type | Default value | Description | | --------- | ---------------- | ------------- | ------------------------------------------------------- | | right | [number, number] | - | Minimum and maximum boundaries of the right coordinates | | left | [number, number] | - | Minimum and maximum boundaries of the left coordinates | | top | [number, number] | - | Minimum and maximum boundaries of the top coordinates |

`properties` >Object to set the properties of the isometric rectangle | Property | Type | Default value | Description | | --------------- | -------------------- | ------------- | -------------------------------------------------------------------- | | id | string | random | Sets the id of the isometric rectangle. It also sets the id of the native SVG element | | height | number | - | Sets the height of the isometric rectangle | | width | number | - | Sets the width of the isometric rectangle | | right | number | 0 | Sets the right isometric coordinates of the isometric rectangle | | left | number | 0 | Sets the left isometric coordinates of the isometric rectangle | | top | number | 0 | Sets the top isometric coordinates of the isometric rectangle | | planeView | PlaneView (`string`) | - | Sets the plane view in which the isometric rectangle will be created | | fillColor | string | "white" | Sets the fill color of the isometric rectangle | | fillOpacity | number | 1 | Sets the fill opacity of the isometric rectangle | | strokeColor | string | "black" | Sets the stroke color of the isometric rectangle | | strokeOpacity | number | 1 | Sets stroke opacity of the isometric rectangle | | strokeDashArray | number[] | [] | Sets the [SVG stroke dasharray][1] of the isometric rectangle | | strokeLinecap | string | "butt" | Sets the [SVG stroke linecap][2] of the isometric rectangle | | strokeLinejoin | string | "round" | Sets the [SVG stroke linejoin][3] of the isometric rectangle | | strokeWidth | number | 1 | Sets the stroke width of the isometric rectangle | | texture | Texture (`object`) | - | Sets the texture of the isometric rectangle | | className | string | - | Sets the CSS class of the isometric rectangle | `planeView values` >"TOP" | "FRONT" | "SIDE" `texture properties` >Object to set the texture of the isometric rectangle | Property | Type | Default value | Description | | --------------- | -------------------- | ---------------- | -------------------------------------------------------------------- | | url | string | - | URL of the image texture | | planeView | PlaneView (`string`) | parent planeView | Sets the texture plane view. By default it takes the isometric rectangle plane view | | height | number | - | Sets the texture height | | width | number | - | Sets the texture width | | scale | number | - | Sets the scale of the texture | | pixelated | boolean | - | Sets the image rendering of the texture | | shift | Point (`object`) | - | Shifts the background position | | rotation | Rotation (`object`) | - | Set the rotation of the texture | `shift properties` >Object to shift the background position | Property | Type | Default value | Description | | -------- | ------ | --------------| ----------------------- | | right | number | - | Right coordinates | | left | number | - | Left coordinates | | top | number | - | Top coordinates | `rotation properties` >Object to set the background rotation | Property | Type | Default value | Description | | -------- | --------------- | --------------| ----------------------- | | axis | Axis (`string`) | - | Rotation axis | | value | number | - | Rotation value | `axis values` >"RIGHT" | "LEFT" | "TOP"

>All the instance methods (except `getElement` and `getPattern`) return the same instance, so they are chainable. ```javascript getElement() ``` >Returns the native `SVG` path element ```javascript getPattern() ``` >Returns the native `SVGPatternElement` responsible for the texture ```javascript update() ``` >Forces a re-render of the SVG rectangle ```javascript updateTexture(texture) ``` >Adds or override the texture properties | Property | Type | Optional | Description | | --------- | -------------------- | --------- | ----------------------------------------------- | | url | string | yes | URL of the image texture | | planeView | PlaneView (`string`) | yes | Texture plane view | | height | number | yes | Texture height | | width | number | yes | Texture width | | scale | number | yes | Texture scale | | pixelated | boolean | yes | Image rendering of the texture | | shift | Point (`object`) | yes | Shifts the background position | | rotation | Rotation (`object`) | yes | Rotation of the texture | `shift properties` >Object to shift the background position | Property | Type | Default value | Description | | -------- | ------ | --------------| ----------------------- | | right | number | - | Right coordinates | | left | number | - | Left coordinates | | top | number | - | Top coordinates | `rotation properties` >Object to set the background rotation | Property | Type | Default value | Description | | -------- | --------------- | --------------| ----------------------- | | axis | Axis (`string`) | - | Rotation axis | | value | number | - | Rotation value | `axis values` >"RIGHT" | "LEFT" | "TOP" ```javascript clear() ``` >Cleans the isometric rectangle (removes all the path commands from the native SVG path element) ```javascript addAnimation(animation) ``` >Adds an animated element to the isometric Rectangle (not compatible with Internet Explorer). These are the properties of the `SVGRectangleAnimation` object: | Property | Type | Optional | Default | Description | | --------------- | -------- | --------- | ------- | ------------------------------------------------ | | property | string | no | - | Indicates which property should be animated | | duration | number | yes | 1 | Indicates the number of seconds of the animation | | repeat | number | yes | 0 | Number of times that the animation will run. `0` runs indefinitely | | from | string / number | yes | - | Initial value of the animation (if this property is used, `values` property can't be used) | | to | string / number | yes | - | Final value of the animation (if this property is used, `values` property can't be used) | | values | string / number / string[] / number[] | yes | - | All the values of the animation (if this property is used, `from` and `to` properties can't be used) | These are the properties that can be animated (property `property`) * fillColor * fillOpacity * strokeColor * strokeOpacity * strokeWidth * right\* * left\* * top\* * width\* * height\* >\* At the moment, it is not possible to animate more than one of these properties at the same time. If you do it, only the last one will be applied. ```javascript removeAnimationByIndex(index) ``` >Remove an especific animation element by its index. ```javascript removeAnimations() ``` >Remove all the animation elements. ```javascript addEventListener(type, callback, [useCapture]) ``` >Sets up a function that will be called whenever the specified event is delivered to the isometric rectangle (the SVG path element) | Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean | ```javascript removeEventListener(type, listener, [useCapture]) ``` >Removes from the isometric rectangle (the SVG path element) an event listener previously registered with `addEventListener` | Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean |

| Property | Type | Description | | --------------- | ------------------ | ------------------------------------------------------------------------ | | id | string | Gets and sets the id of the isometric rectangle. This property also sets the id of the native `SVG` element | | height | number | Gets and sets the height of the isometric rectangle | | width | number | Gets and sets the width of the isometric rectangle | | right | number | Gets and sets the right isometric coordinates of the isometric rectangle | | left | number | Gets and sets the left isometric coordinates of the isometric rectangle | | top | number | Gets and sets the top isometric coordinates of the isometric rectangle | | planeView | string | Gets and sets the plane view in which the isometric rectangle is created | | fillColor | string | Gets and sets the fill color of the isometric rectangle | | fillOpacity | number | Gets and sets the fill opacity of the isometric rectangle | | strokeColor | string | Gets and sets the stroke color of the isometric rectangle | | strokeOpacity | number | Gets and sets the stroke opacity of the isometric rectangle | | strokeDashArray | number[] | Gets and sets the [SVG stroke dasharray][1] of the isometric rectangle | | strokeLinecap | string | Gets and sets the [SVG stroke linecap][2] of the isometric rectangle | | strokeLinejoin | string | Gets and sets the [SVG stroke linejoin][3] of the isometric rectangle | | strokeWidth | number | Gets and sets the stroke width of the isometric rectangle | | texture | Texture (`object`) | Gets and sets the texture of the isometric rectangle | | drag \* | PlaneView (`string`) / false | Gets an sets the dragging plane of the isometric rectangle | | bounds | object / false | Gets and sets the boundaries of the isometric rectangle position | | className | string | Gets and sets the CSS class of the isometric rectangle | >\* When dragging an isometric rectangle, the events `dragstart`, `drag` and `dragend` will be fired in that order. These events will be `CustomEvents` with a `detail` property containing the `right`, `left` and `top` properties that the isometric rectangle will receive. The `drag` event can be prevented using `preventDefault` so, if it is prevented, the isometric rectangle will not change its position when it is dragged. `planeView values` >"TOP" | "FRONT" | "SIDE" | false `bounds properties` >Object to set the boundaries of the isometric rectangle position. If it is set as false the isometric rectangle will not have boundaries. | Property | Type | Default value | Description | | --------- | ---------------- | ------------- | ------------------------------------------------------- | | right | [number, number] | - | Minimum and maximum boundaries of the right coordinates | | left | [number, number] | - | Minimum and maximum boundaries of the left coordinates | | top | [number, number] | - | Minimum and maximum boundaries of the top coordinates |

`properties` >Object to set the properties of the isometric circle | Property | Type | Default value | Description | | --------------- | -------------------- | -------------------- | ----------------------------------------------------------------- | | id | string | random | Sets the id of the isometric circle. It also sets the id of the native SVG element | | radius | number | - | Sets the radius of the isometric circle | | right | number | 0 | Sets the right isometric coordinates of the isometric circle | | left | number | 0 | Sets the left isometric coordinates of the isometric circle | | top | number | 0 | Sets the top isometric coordinates of the isometric circle | | planeView | PlaneView (`string`) | - | Sets the plane view in which the isometric circle will be created | | fillColor | string | "white" | Sets the fill color of the isometric circle | | fillOpacity | number | 1 | Sets the fill opacity of the isometric circle | | strokeColor | string | "black" | Sets the stroke color of the isometric circle | | strokeOpacity | number | 1 | Sets stroke opacity of the isometric circle | | strokeDashArray | number[] | [] | Sets the [SVG stroke dasharray][1] of the isometric circle | | strokeLinecap | string | "butt" | Sets the [SVG stroke linecap][2] of the isometric circle | | strokeLinejoin | string | "round" | Sets the [SVG stroke linejoin][3] of the isometric circle | | strokeWidth | number | 1 | Sets the stroke width of the isometric circle | | texture | Texture (`object`) | - | Sets the texture of the isometric circle | | className | string | - | Sets the CSS class of the isometric circle | `planeView values` >"TOP" | "FRONT" | "SIDE" `texture properties` >Object to set the texture of the isometric circle | Property | Type | Default value | Description | | --------------- | -------------------- | ---------------- | -------------------------------------------------------------------- | | url | string | - | URL of the image texture | | planeView | PlaneView (`string`) | parent planeView | Sets the texture plane view. By default it takes the isometric circle plane view | | height | number | - | Sets the texture height | | width | number | - | Sets the texture width | | scale | number | - | Sets the scale of the texture | | pixelated | boolean | - | Sets the image rendering of the texture | | shift | Point (`object`) | - | Shifts the background position | | rotation | Rotation (`object`) | - | Set the rotation of the texture | `shift properties` >Object to shift the background position | Property | Type | Default value | Description | | -------- | ------ | --------------| ----------------------- | | right | number | - | Right coordinates | | left | number | - | Left coordinates | | top | number | - | Top coordinates | `rotation properties` >Object to set the background rotation | Property | Type | Default value | Description | | -------- | --------------- | --------------| ----------------------- | | axis | Axis (`string`) | - | Rotation axis | | value | number | - | Rotation value | `axis values` >"RIGHT" | "LEFT" | "TOP"

>All the instance methods (except `getElement` and `getPattern`) return the same instance, so they are chainable. ```javascript getElement() ``` >Returns the native `SVG` path element ```javascript getPattern() ``` >Returns the native `SVGPatternElement` responsible for the texture ```javascript update() ``` >Forces a re-render of the SVG circle ```javascript updateTexture(texture) ``` >Adds or override the texture properties | Property | Type | Optional | Description | | --------- | -------------------- | --------- | ----------------------------------------------- | | url | string | yes | URL of the image texture | | planeView | PlaneView (`string`) | yes | Texture plane view | | height | number | yes | Texture height | | width | number | yes | Texture width | | scale | number | yes | Texture scale | | pixelated | boolean | yes | Image rendering of the texture | | shift | Point (`object`) | yes | Shifts the background position | | rotation | Rotation (`object`) | yes | Rotation of the texture | `shift properties` >Object to shift the background position | Property | Type | Default value | Description | | -------- | ------ | --------------| ----------------------- | | right | number | - | Right coordinates | | left | number | - | Left coordinates | | top | number | - | Top coordinates | `rotation properties` >Object to set the background rotation | Property | Type | Default value | Description | | -------- | --------------- | --------------| ----------------------- | | axis | Axis (`string`) | - | Rotation axis | | value | number | - | Rotation value | `axis values` >"RIGHT" | "LEFT" | "TOP" ```javascript clear() ``` >Cleans the isometric circle (removes all the path commands from the native SVG path element) ```javascript addAnimation(animation) ``` >Adds an animated element to the isometric circle (not compatible with Internet Explorer). These are the properties of the `SVGCircleAnimation` object: | Property | Type | Optional | Default | Description | | --------------- | -------- | --------- | ------- | ------------------------------------------------ | | property | string | no | - | Indicates which property should be animated | | duration | number | yes | 1 | Indicates the number of seconds of the animation | | repeat | number | yes | 0 | Number of times that the animation will run. `0` runs indefinitely | | from | string / number | yes | - | Initial value of the animation (if this property is used, `values` property can't be used) | | to | string / number | yes | - | Final value of the animation (if this property is used, `values` property can't be used) | | values | string / number / string[] / number[] | yes | - | All the values of the animation (if this property is used, `from` and `to` properties can't be used) | These are the properties that can be animated (property `property`) * fillColor * fillOpacity * strokeColor * strokeOpacity * strokeWidth * right\* * left\* * top\* * radius\* >\* At the moment, it is not possible to animate more than one of these properties at the same time. If you do it, only the last one will be applied. ```javascript removeAnimationByIndex(index) ``` >Remove an especific animation element by its index. ```javascript removeAnimations() ``` >Remove all the animation elements. ```javascript addEventListener(type, callback, [useCapture]) ``` >Sets up a function that will be called whenever the specified event is delivered to the isometric circle (the SVG path element) | Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean | ```javascript removeEventListener(type, listener, [useCapture]) ``` >Removes from the isometric circle (the SVG path element) an event listener previously registered with `addEventListener` | Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean |

| Property | Type | Description | | --------------- | ------------------ | --------------------------------------------------------------------- | | id | string | Gets and sets the id of the isometric circle. This property also sets the id of the native `SVG` element | | radius | number | Gets and sets the radius of the isometric circle | | right | number | Gets and sets the right isometric coordinates of the isometric circle | | left | number | Gets and sets the left isometric coordinates of the isometric circle | | top | number | Gets and sets the top isometric coordinates of the isometric circle | | planeView | string | Gets and sets the plane view in which the isometric circle is created | | fillColor | string | Gets and sets the fill color of the isometric circle | | fillOpacity | number | Gets and sets the fill opacity of the isometric circle | | strokeColor | string | Gets and sets the stroke color of the isometric circle | | strokeOpacity | number | Gets and sets the stroke opacity of the isometric circle | | strokeDashArray | number[] | Gets and sets the [SVG stroke dasharray][1] of the isometric circle | | strokeLinecap | string | Gets and sets the [SVG stroke linecap][2] of the isometric circle | | strokeLinejoin | string | Gets and sets the [SVG stroke linejoin][3] of the isometric circle | | strokeWidth | number | Gets and sets the stroke width of the isometric circle | | texture | Texture (`object`) | Gets and sets the texture of the isometric circle | | drag \* | PlaneView (`string`) / false | Gets an sets the dragging plane of the isometric circle | | bounds | object / false | Gets an sets the boundaries of the isometric circle position | | className | string | Gets and sets the CSS class of the isometric circle | >\* When dragging an isometric circle, the events `dragstart`, `drag` and `dragend` will be fired in that order. These events will be `CustomEvents` with a `detail` property containing the `right`, `left` and `top` properties that the isometric circle will receive. The `drag` event can be prevented using `preventDefault` so, if it is prevented, the isometric circle will not change its position when it is dragged. `planeView values` >"TOP" | "FRONT" | "SIDE" | false `bounds properties` >Object to set the boundaries of the isometric circle position. If it is set as false the isometric circle will not have boundaries. | Property | Type | Default value | Description | | --------- | ---------------- | ------------- | ------------------------------------------------------- | | right | [number, number] | - | Minimum and maximum boundaries of the right coordinates | | left | [number, number] | - | Minimum and maximum boundaries of the left coordinates | | top | [number, number] | - | Minimum and maximum boundaries of the top coordinates |

`properties` >Object to set the properties of the isometric star polygon | Property | Type | Default value | Description | | --------------- | -------------------- | -------------------- | ----------------------------------------------------------------------- | | id | string | random | Sets the id of the isometric star polygon. It also sets the id of the native SVG element | | radius | number | - | Sets the radius of the isometric star polygon | | points | number | - | Sets the number of points of the isometric star polygon | | density | number | - | Sets the density of the isometric star polygon | | rotation | number | - | Sets the rotation of the isometric star polygon | | right | number | 0 | Sets the right isometric coordinates of the isometric star polygon | | left | number | 0 | Sets the left isometric coordinates of the isometric star polygon | | top | number | 0 | Sets the top isometric coordinates of the isometric star polygon | | planeView | PlaneView (`string`) | - | Sets the plane view in which the isometric star polygon will be created | | fillColor | string | "white" | Sets the fill color of the isometric star polygon | | fillOpacity | number | 1 | Sets the fill opacity of the isometric star polygon | | strokeColor | string | "black" | Sets the stroke color of the isometric star polygon | | strokeOpacity | number | 1 | Sets stroke opacity of the isometric star polygon | | strokeDashArray | number[] | [] | Sets the [SVG stroke dasharray][1] of the isometric star polygon | | strokeLinecap | string | "butt" | Sets the [SVG stroke linecap][2] of the isometric star polygon | | strokeLinejoin | string | "round" | Sets the [SVG stroke linejoin][3] of the isometric star polygon | | strokeWidth | number | 1 | Sets the stroke width of the isometric star polygon | | texture | Texture (`object`) | - | Sets the texture of the isometric star polygon | | className | string | - | Sets the CSS class of the isometric star polygon | `planeView values` >"TOP" | "FRONT" | "SIDE" `texture properties` >Object to set the texture of the isometric star polygon | Property | Type | Default value | Description | | --------------- | -------------------- | ---------------- | -------------------------------------------------------------------- | | url | string | - | URL of the image texture | | planeView | PlaneView (`string`) | parent planeView | Sets the texture plane view. By default it takes the isometric star polygon plane view | | height | number | - | Sets the texture height | | width | number | - | Sets the texture width | | scale | number | - | Sets the scale of the texture | | pixelated | boolean | - | Sets the image rendering of the texture | | shift | Point (`object`) | - | Shifts the background position | | rotation | Rotation (`object`) | - | Set the rotation of the texture | `shift properties` >Object to shift the background position | Property | Type | Default value | Description | | -------- | ------ | --------------| ----------------------- | | right | number | - | Right coordinates | | left | number | - | Left coordinates | | top | number | - | Top coordinates | `rotation properties` >Object to set the background rotation | Property | Type | Default value | Description | | -------- | --------------- | --------------| ----------------------- | | axis | Axis (`string`) | - | Rotation axis | | value | number | - | Rotation value | `axis values` >"RIGHT" | "LEFT" | "TOP"

>All the instance methods (except `getElement` and `getPattern`) return the same instance, so they are chainable. ```javascript getElement() ``` >Returns the native `SVG` path element ```javascript getPattern() ``` >Returns the native `SVGPatternElement` responsible for the texture ```javascript update() ``` >Forces a re-render of the SVG pentagram ```javascript updateTexture(texture) ``` >Adds or override the texture properties | Property | Type | Optional | Description | | --------- | -------------------- | --------- | ----------------------------------------------- | | url | string | yes | URL of the image texture | | planeView | PlaneView (`string`) | yes | Texture plane view | | height | number | yes | Texture height | | width | number | yes | Texture width | | scale | number | yes | Texture scale | | pixelated | boolean | yes | Image rendering of the texture | | shift | Point (`object`) | yes | Shifts the background position | | rotation | Rotation (`object`) | yes | Rotation of the texture | `shift properties` >Object to shift the background position | Property | Type | Default value | Description | | -------- | ------ | --------------| ----------------------- | | right | number | - | Right coordinates | | left | number | - | Left coordinates | | top | number | - | Top coordinates | `rotation properties` >Object to set the background rotation | Property | Type | Default value | Description | | -------- | --------------- | --------------| ----------------------- | | axis | Axis (`string`) | - | Rotation axis | | value | number | - | Rotation value | `axis values` >"RIGHT" | "LEFT" | "TOP" ```javascript clear() ``` >Cleans the isometric star polygon (removes all the path commands from the native SVG path element) ```javascript addAnimation(animation) ``` >Adds an animated element to the isometric star polygon (not compatible with Internet Explorer). These are the properties of the `SVGPentagramAnimation` object: | Property | Type | Optional | Default | Description | | --------------- | -------- | --------- | ------- | ------------------------------------------------ | | property | string | no | - | Indicates which property should be animated | | duration | number | yes | 1 | Indicates the number of seconds of the animation | | repeat | number | yes | 0 | Number of times that the animation will run. `0` runs indefinitely | | from | string / number | yes | - | Initial value of the animation (if this property is used, `values` property can't be used) | | to | string / number | yes | - | Final value of the animation (if this property is used, `values` property can't be used) | | values | string / number / string[] / number[] | yes | - | All the values of the animation (if this property is used, `from` and `to` properties can't be used) | These are the properties that can be animated (property `property`) * fillColor * fillOpacity * strokeColor * strokeOpacity * strokeWidth * right\* * left\* * top\* * radius\* * density\* * rotation\* >\* At the moment, it is not possible to animate more than one of these properties at the same time. If you do it, only the last one will be applied. ```javascript removeAnimationByIndex(index) ``` >Remove an especific animation element by its index. ```javascript removeAnimations() ``` >Remove all the animation elements. ```javascript addEventListener(type, callback, [useCapture]) ``` >Sets up a function that will be called whenever the specified event is delivered to the isometric star polygon (the SVG path element) | Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean | ```javascript removeEventListener(type, listener, [useCapture]) ``` >Removes from the isometric star polygon (the SVG path element) an event listener previously registered with `addEventListener` | Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean |

| Property | Type | Description | | --------------- | ------------------ | --------------------------------------------------------------------------- | | id | string | Gets and sets the id of the isometric star polygon. This property also sets the id of the native `SVG` element | | radius | number | Gets and sets the radius of the isometric star polygon | | rotation | number | Gets and sets the rotation of the isometric star polygon | | points | number | Gets and sets the number of points of the isometric star polygon | | density | number | Gets and sets the density of the isometric star polygon | | right | number | Gets and sets the right isometric coordinates of the isometric star polygon | | left | number | Gets and sets the left isometric coordinates of the isometric star polygon | | top | number | Gets and sets the top isometric coordinates of the isometric star polygon | | planeView | string | Gets and sets the plane view in which the isometric star polygon is created | | fillColor | string | Gets and sets the fill color of the isometric star polygon | | fillOpacity | number | Gets and sets the fill opacity of the isometric star polygon | | strokeColor | string | Gets and sets the stroke color of the isometric star polygon | | strokeOpacity | number | Gets and sets the stroke opacity of the isometric star polygon | | strokeDashArray | number[] | Gets and sets the [SVG stroke dasharray][1] of the isometric star polygon | | strokeLinecap | string | Gets and sets the [SVG stroke linecap][2] of the isometric star polygon | | strokeLinejoin | string | Gets and sets the [SVG stroke linejoin][3] of the isometric star polygon | | strokeWidth | number | Gets and sets the stroke width of the isometric star polygon | | texture | Texture (`object`) | Gets and sets the texture of the isometric star polygon | | drag \* | PlaneView (`string`) / false | Gets an sets the dragging plane of the isometric star polygon | | bounds | object / false | Gets and sets the boundaries of the isometric star polygon position | | className | string | Gets and sets the CSS class of the isometric star polygon | >\* When dragging an isometric star polygon, the events `dragstart`, `drag` and `dragend` will be fired in that order. These events will be `CustomEvents` with a `detail` property containing the `right`, `left` and `top` properties that the isometric star polygon will receive. The `drag` event can be prevented using `preventDefault` so, if it is prevented, the isometric star polygon will not change its position when it is dragged. `planeView values` >"TOP" | "FRONT" | "SIDE" | false `bounds properties` >Object to set the boundaries of the isometric star polygon position. If it is set as false the isometric star polygon will not have boundaries. | Property | Type | Default value | Description | | --------- | ---------------- | ------------- | ------------------------------------------------------- | | right | [number, number] | - | Minimum and maximum boundaries of the right coordinates | | left | [number, number] | - | Minimum and maximum boundaries of the left coordinates | | top | [number, number] | - | Minimum and maximum boundaries of the top coordinates |

`properties` >Object to set the properties of the isometric pentagram | Property | Type | Default value | Description | | --------------- | -------------------- | -------------------- | -------------------------------------------------------------------- | | id | string | random | Sets the id of the isometric pentagram. It also sets the id of the native SVG element | | radius | number | - | Sets the radius of the isometric pentagram | | rotation | number | - | Sets the rotation of the isometric pentagram | | right | number | 0 | Sets the right isometric coordinates of the isometric pentagram | | left | number | 0 | Sets the left isometric coordinates of the isometric pentagram | | top | number | 0 | Sets the top isometric coordinates of the isometric pentagram | | planeView | PlaneView (`string`) | - | Sets the plane view in which the isometric pentagram will be created | | fillColor | string | "white" | Sets the fill color of the isometric pentagram | | fillOpacity | number | 1 | Sets the fill opacity of the isometric pentagram | | strokeColor | string | "black" | Sets the stroke color of the isometric pentagram | | strokeOpacity | number | 1 | Sets stroke opacity of the isometric pentagram | | strokeDashArray | number[] | [] | Sets the [SVG stroke dasharray][1] of the isometric pentagram | | strokeLinecap | string | "butt" | Sets the [SVG stroke linecap][2] of the isometric pentagram | | strokeLinejoin | string | "round" | Sets the [SVG stroke linejoin][3] of the isometric pentagram | | strokeWidth | number | 1 | Sets the stroke width of the isometric pentagram | | texture | Texture (`object`) | - | Sets the texture of the isometric pentagram | | className | string | - | Sets the CSS class of the isometric pentagram | `planeView values` >"TOP" | "FRONT" | "SIDE" `texture properties` >Object to set the texture of the isometric pentagram | Property | Type | Default value | Description | | --------------- | -------------------- | ---------------- | -------------------------------------------------------------------- | | url | string | - | URL of the image texture | | planeView | PlaneView (`string`) | parent planeView | Sets the texture plane view. By default it takes the isometric pentagram plane view | | height | number | - | Sets the texture height | | width | number | - | Sets the texture width | | scale | number | - | Sets the scale of the texture | | pixelated | boolean | - | Sets the image rendering of the texture | | shift | Point (`object`) | - | Shifts the background position | | rotation | Rotation (`object`) | - | Set the rotation of the texture | `shift properties` >Object to shift the background position | Property | Type | Default value | Description | | -------- | ------ | --------------| ----------------------- | | right | number | - | Right coordinates | | left | number | - | Left coordinates | | top | number | - | Top coordinates | `rotation properties` >Object to set the background rotation | Property | Type | Default value | Description | | -------- | --------------- | --------------| ----------------------- | | axis | Axis (`string`) | - | Rotation axis | | value | number | - | Rotation value | `axis values` >"RIGHT" | "LEFT" | "TOP"

>All the instance methods (except `getElement` and `getPattern`) return the same instance, so they are chainable. ```javascript getElement() ``` >Returns the native `SVG` path element ```javascript getPattern() ``` >Returns the native `SVGPatternElement` responsible for the texture ```javascript update() ``` >Forces a re-render of the SVG pentagram ```javascript updateTexture(texture) ``` >Adds or override the texture properties | Property | Type | Optional | Description | | --------- | -------------------- | --------- | ----------------------------------------------- | | url | string | yes | URL of the image texture | | planeView | PlaneView (`string`) | yes | Texture plane view | | height | number | yes | Texture height | | width | number | yes | Texture width | | scale | number | yes | Texture scale | | pixelated | boolean | yes | Image rendering of the texture | | shift | Point (`object`) | yes | Shifts the background position | | rotation | Rotation (`object`) | yes | Rotation of the texture | `shift properties` >Object to shift the background position | Property | Type | Default value | Description | | -------- | ------ | --------------| ----------------------- | | right | number | - | Right coordinates | | left | number | - | Left coordinates | | top | number | - | Top coordinates | `rotation properties` >Object to set the background rotation | Property | Type | Default value | Description | | -------- | --------------- | --------------| ----------------------- | | axis | Axis (`string`) | - | Rotation axis | | value | number | - | Rotation value | `axis values` >"RIGHT" | "LEFT" | "TOP" ```javascript clear() ``` >Cleans the isometric pentagram (removes all the path commands from the native SVG path element) ```javascript addAnimation(animation) ``` >Adds an animated element to the isometric pentagram (not compatible with Internet Explorer). These are the properties of the `SVGPentagramAnimation` object: | Property | Type | Optional | Default | Description | | --------------- | -------- | --------- | ------- | ------------------------------------------------ | | property | string | no | - | Indicates which property should be animated | | duration | number | yes | 1 | Indicates the number of seconds of the animation | | repeat | number | yes | 0 | Number of times that the animation will run. `0` runs indefinitely | | from | string / number | yes | - | Initial value of the animation (if this property is used, `values` property can't be used) | | to | string / number | yes | - | Final value of the animation (if this property is used, `values` property can't be used) | | values | string / number / string[] / number[] | yes | - | All the values of the animation (if this property is used, `from` and `to` properties can't be used) | These are the properties that can be animated (property `property`) * fillColor * fillOpacity * strokeColor * strokeOpacity * strokeWidth * right\* * left\* * top\* * radius\* * rotation\* >\* At the moment, it is not possible to animate more than one of these properties at the same time. If you do it, only the last one will be applied. ```javascript removeAnimationByIndex(index) ``` >Remove an especific animation element by its index. ```javascript removeAnimations() ``` >Remove all the animation elements. ```javascript addEventListener(type, callback, [useCapture]) ``` >Sets up a function that will be called whenever the specified event is delivered to the isometric pentagram (the SVG path element) | Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean | ```javascript removeEventListener(type, listener, [useCapture]) ``` >Removes from the isometric pentagram (the SVG path element) an event listener previously registered with `addEventListener` | Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean |

| Property | Type | Description | | --------------- | ------------------ | ------------------------------------------------------------------------ | | id | string | Gets and sets the id of the isometric pentagram. This property also sets the id of the native `SVG` element | | radius | number | Gets and sets the radius of the isometric pentagram | | rotation | number | Gets and sets the rotation of the isometric pentagram | | right | number | Gets and sets the right isometric coordinates of the isometric pentagram | | left | number | Gets and sets the left isometric coordinates of the isometric pentagram | | top | number | Gets and sets the top isometric coordinates of the isometric pentagram | | planeView | string | Gets and sets the plane view in which the isometric pentagram is created | | fillColor | string | Gets and sets the fill color of the isometric pentagram | | fillOpacity | number | Gets and sets the fill opacity of the isometric pentagram | | strokeColor | string | Gets and sets the stroke color of the isometric pentagram | | strokeOpacity | number | Gets and sets the stroke opacity of the isometric pentagram | | strokeDashArray | number[] | Gets and sets the [SVG stroke dasharray][1] of the isometric pentagram | | strokeLinecap | string | Gets and sets the [SVG stroke linecap][2] of the isometric pentagram | | strokeLinejoin | string | Gets and sets the [SVG stroke linejoin][3] of the isometric pentagram | | strokeWidth | number | Gets and sets the stroke width of the isometric pentagram | | texture | Texture (`object`) | Gets and sets the texture of the isometric pentagram | | drag \* | PlaneView (`string`) / false | Gets an sets the dragging plane of the isometric pentagram | | bounds | object / false | Gets and sets the boundaries of the isometric pentagram position | | className | string | Gets and sets the CSS class of the isometric pentagram | >\* When dragging an isometric pentagram, the events `dragstart`, `drag` and `dragend` will be fired in that order. These events will be `CustomEvents` with a `detail` property containing the `right`, `left` and `top` properties that the isometric pentagram will receive. The `drag` event can be prevented using `preventDefault` so, if it is prevented, the isometric pentagram will not change its position when it is dragged. `planeView values` >"TOP" | "FRONT" | "SIDE" | false `bounds properties` >Object to set the boundaries of the isometric pentagram position. If it is set as false the isometric pentagram will not have boundaries. | Property | Type | Default value | Description | | --------- | ---------------- | ------------- | ------------------------------------------------------- | | right | [number, number] | - | Minimum and maximum boundaries of the right coordinates | | left | [number, number] | - | Minimum and maximum boundaries of the left coordinates | | top | [number, number] | - | Minimum and maximum boundaries of the top coordinates |

`properties` _(optional)_ >Object to set the properties of the isometric path | Property | Type | Default value | Description | | --------------- | ------------------ | -------------- | -------------------------------------------------------- | | id | string | random | Sets the id of the isometric path. It also sets the id of the native SVG element | | fillColor | string | "white" | Sets the fill color of the isometric path | | fillOpacity | number | 1 | Sets the fill opacity of the isometric path | | strokeColor | string | "black" | Sets the stroke color of the isometric path | | strokeOpacity | number | 1 | Sets stroke opacity of the isometric path | | strokeDashArray | number[] | [] | Sets the [SVG stroke dasharray][1] of the isometric path | | strokeLinecap | string | "butt" | Sets the [SVG stroke linecap][2] of the isometric path | | strokeLinejoin | string | "round" | Sets the [SVG stroke linejoin][3] of the isometric path | | strokeWidth | number | 1 | Sets the stroke width of the isometric path | | texture | Texture (`object`) | - | Sets the texture of the isometric path | | autoclose | boolean | true | Sets if the path should close automatically or not | | className | string | - | Sets the CSS class of the isometric path | `texture properties` >Object to set the texture of the isometric path | Property | Type | Default value | Description | | --------------- | -------------------- | -------------- | -------------------------------------------------------------------- | | url | string | - | URL of the image texture | | planeView | PlaneView (`string`) | - | Sets the texture plane view | | height | number | - | Sets the texture height | | width | number | - | Sets the texture width | | scale | number | - | Sets the scale of the texture | | pixelated | boolean | - | Sets the image rendering of the texture | | shift | Point (`object`) | - | Shifts the background position | | rotation | Rotation (`object`) | - | Set the rotation of the texture | `shift properties` >Object to shift the background position | Property | Type | Default value | Description | | -------- | ------ | --------------| ----------------------- | | right | number | - | Right coordinates | | left | number | - | Left coordinates | | top | number | - | Top coordinates | `rotation properties` >Object to set the background rotation | Property | Type | Default value | Description | | -------- | --------------- | --------------| ----------------------- | | axis | Axis (`string`) | - | Rotation axis | | value | number | - | Rotation value | `axis values` >"RIGHT" | "LEFT" | "TOP"

>All the instance methods (except `getElement` and `getPattern`) return the same instance, so they are chainable. ```javascript getElement() ``` >Returns the native `SVG` path element ```javascript getPattern() ``` >Returns the native `SVGPatternElement` responsible for the texture ```javascript update() ``` >Forces a re-render of the SVG path ```javascript updateTexture(texture) ``` >Adds or override the texture properties | Property | Type | Optional | Description | | --------- | -------------------- | --------- | ----------------------------------------------- | | url | string | yes | URL of the image texture | | planeView | PlaneView (`string`) | yes | Texture plane view | | height | number | yes | Texture height | | width | number | yes | Texture width | | scale | number | yes | Texture scale | | pixelated | boolean | yes | Image rendering of the texture | | shift | Point (`object`) | yes | Shifts the background position | | rotation | Rotation (`object`) | yes | Rotation of the texture | `shift properties` >Object to shift the background position | Property | Type | Default value | Description | | -------- | ------ | --------------| ----------------------- | | right | number | - | Right coordinates | | left | number | - | Left coordinates | | top | number | - | Top coordinates | `rotation properties` >Object to set the background rotation | Property | Type | Default value | Description | | -------- | --------------- | --------------| ----------------------- | | axis | Axis (`string`) | - | Rotation axis | | value | number | - | Rotation value | `axis values` >"RIGHT" | "LEFT" | "TOP" ```javascript moveTo(right, left, top) ``` >Move the cursor to an isometric point, if the cursor was already in another point, no line is drawn between them. | Parameter | Type | Description | | --------------- | ---------- | ---------------------------------------- | | right | number | Right value in the isometric coordinates | | left | number | Left value in the isometric coordinates | | top | number | Top value in the isometric coordinates | ```javascript lineTo(right, left, top) ``` >Draws a line from the previous isometric point to the destination point. | Parameter | Type | Description | | --------------- | ---------- | ----------------------------------------------------------------- | | right | number | Right value in the isometric coordinates of the destination point | | left | number | Left value in the isometric coordinates of the destination point | | top | number | Top value in the isometric coordinates of the destination point | ```javascript curveTo(controlRight, controlLeft, controlTop, right, left, top) ``` >Draws a curve from the previous isometric point to the designated isometric point crossing the control isometric point. | Parameter | Type | Description | | --------------- | ---------- | ----------------------------------------------------------------- | | controlRight | number | Right value in the isometric coordinates of the control point | | controlLeft | number | Left value in the isometric coordinates of the control point | | controlTop | number | Top value in the isometric coordinates of the control point | | right | number | Right value in the isometric coordinates of the destination point | | left | number | Left value in the isometric coordinates of the destination point | | top | number | Top value in the isometric coordinates of the destination point | ```javascript mt(right, left, top) ``` >Alias of `moveTo`. ```javascript lt(right, left, top) ``` >Alias of `lineTo`. ```javascript ct(controlRight, controlLeft, controlTop, right, left, top) ``` >Alias of `curveTo`. ```javascript draw(commands) ``` >Draws a line taking into account a series of drawing commands. | Parameter | Type | Description | | --------------- | ---------- | ---------------------------------------- | | commands | string | A series of drawing commands. For example, `M0 0 0 L1 1 1 C 2 2 2 3 3 3`has the same effect as `moveTo(0, 0, 0).lineTo(1, 1, 1).curveTo(2, 2, 2, 3, 3, 3)` | ```javascript clear() ``` >Cleans the isometric path (removes all the path commands from the native SVG path element) ```javascript addAnimation(animation) ``` >Adds an animated element to the isometric path (not compatible with Internet Explorer). These are the properties of the `SVGPathAnimation` object: | Property | Type | Optional | Default | Description | | --------------- | -------- | --------- | ------- | ------------------------------------------------ | | property | string | no | - | Indicates which property should be animated | | duration | number | yes | 1 | Indicates the number of seconds of the animation | | repeat | number | yes | 0 | Number of times that the animation will run. `0` runs indefinitely | | from | string / number | yes | - | Initial value of the animation (if this property is used, `values` property can't be used) | | to | string / number | yes | - | Final value of the animation (if this property is used, `values` property can't be used) | | values | string / number / string[] / number[] | yes | - | All the values of the animation (if this property is used, `from` and `to` properties can't be used) | These are the properties that can be animated (property `property`) * fillColor * fillOpacity * strokeColor * strokeOpacity * strokeWidth * path ```javascript removeAnimationByIndex(index) ``` >Remove an especific animation element by its index. ```javascript removeAnimations() ``` >Remove all the animation elements. ```javascript addEventListener(type, callback, [useCapture]) ``` >Sets up a function that will be called whenever the specified event is delivered to the isometric path (the SVG path element) | Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean | ```javascript removeEventListener(type, listener, [useCapture]) ``` >Removes from the isometric path (the SVG path element) an event listener previously registered with `addEventListener` | Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean |

| Property | Type | Description | | --------------- | ------------------ | ----------------------------------------------------------------- | | id | string | Gets and sets the id of the isometric path. This property also sets the id of the native `SVG` element | | fillColor | string | Gets and sets the fill color of the isometric path | | fillOpacity | number | Gets and sets the fill opacity of the isometric path | | strokeColor | string | Gets and sets the stroke color of the isometric path | | strokeOpacity | number | Gets and sets the stroke opacity of the isometric path | | strokeDashArray | number[] | Gets and sets the [SVG stroke dasharray][1] of the isometric path | | strokeLinecap | string | Gets and sets the [SVG stroke linecap][2] of the isometric path | | strokeLinejoin | string | Gets and sets the [SVG stroke linejoin][3] of the isometric path | | strokeWidth | number | Gets and sets the stroke width of the isometric path | | texture | Texture (`object`) | Gets and sets the texture of the isometric path | | autoclose | boolean | Gets and sets the autoclose property of the isometric path | | className | string | Gets and sets the CSS class of the isometric path |

`properties` >Object to set the properties of the isometric text | Property | Type | Default value | Description | | --------------- | -------------------- | -------------------- | ----------------------------------------------------------------- | | id | string | random | Sets the id of the isometric text. It also sets the id of the native SVG group element | | planeView | PlaneView (`string`) | - | Sets the plane view in which the isometric text will be created | | text | string | '' | Sets the text content of the isometric text | | right | number | 0 | Sets the right isometric coordinates of the isometric text | | left | number | 0 | Sets the left isometric coordinates of the isometric text | | top | number | 0 | Sets the top isometric coordinates of the isometric text | | fontFamily | string | 'Arial' | Sets the font-family of the isometric text | | fontSize | string | 12 | Sets the font-size of the isometric text | | fontStyle | string literal | 'normal | Sets the font-style of the isometric text | | fontWeight | number | string literal | 'normal' | Sets the font-weight of the isometric text | | rotation | number | 0 | Sets the rotation of the isometric text | | origin | string literal tuple | ['center', 'center'] | Sets the origin of the isometric text position and transformations| | selectable | boolean | true | Indicates if the isometric text should be selectable or not | | fillColor | string | "white" | Sets the fill color of the isometric text | | fillOpacity | number | 1 | Sets the fill opacity of the isometric text | | strokeColor | string | "black" | Sets the stroke color of the isometric text | | strokeOpacity | number | 1 | Sets stroke opacity of the isometric text | | strokeDashArray | number[] | [] | Sets the [SVG stroke dasharray][1] of the isometric text | | strokeLinecap | string | "butt" | Sets the [SVG stroke linecap][2] of the isometric text | | strokeLinejoin | string | "round" | Sets the [SVG stroke linejoin][3] of the isometric text | | strokeWidth | number | 1 | Sets the stroke width of the isometric text | | texture | Texture (`object`) | - | Sets the texture of the isometric text | | className | string | - | Sets the CSS class of the isometric text | `planeView values` >"TOP" | "FRONT" | "SIDE" `fontStyle values` >"normal" | "italic" | "oblique" `fontWeight values` >number | "normal" | "bold" | "bolder" | "lighter" `origin values` >["left" | "center" | "right", "top" | "center", "bottom"] `texture properties` >Object to set the texture of the isometric text | Property | Type | Default value | Description | | --------------- | -------------------- | ---------------- | -------------------------------------------------------------------- | | url | string | - | URL of the image texture | | planeView | PlaneView (`string`) | parent planeView | Sets the texture plane view. By default it takes the isometric text plane view | | height | number | - | Sets the texture height | | width | number | - | Sets the texture width | | scale | number | - | Sets the scale of the texture | | pixelated | boolean | - | Sets the image rendering of the texture | | shift | Point (`object`) | - | Shifts the background position | | rotation | Rotation (`object`) | - | Set the rotation of the texture | `shift properties` >Object to shift the background position | Property | Type | Default value | Description | | -------- | ------ | --------------| ----------------------- | | right | number | - | Right coordinates | | left | number | - | Left coordinates | | top | number | - | Top coordinates | `rotation properties` >Object to set the background rotation | Property | Type | Default value | Description | | -------- | --------------- | --------------| ----------------------- | | axis | Axis (`string`) | - | Rotation axis | | value | number | - | Rotation value | `axis values` >"RIGHT" | "LEFT" | "TOP"

>All the instance methods (except `getElement` and `getPattern`) return the same instance, so they are chainable. ```javascript getElement() ``` >Returns the native `SVG` `g` element\* >\* The `IsometricText` class, due to its complexity, it is conformed by a group of SVG elements, a `g` element with a `text` element inside and inside this last one a `tspan` element. ```javascript getPattern() ``` >Returns the native `SVGPatternElement` responsible for the texture ```javascript update() ``` >Forces a re-render of the SVG text ```javascript updateTexture(texture) ``` >Adds or override the texture properties | Property | Type | Optional | Description | | --------- | -------------------- | --------- | ----------------------------------------------- | | url | string | yes | URL of the image texture | | planeView | PlaneView (`string`) | yes | Texture plane view | | height | number | yes | Texture height | | width | number | yes | Texture width | | scale | number | yes | Texture scale | | pixelated | boolean | yes | Image rendering of the texture | | shift | Point (`object`) | yes | Shifts the background position | | rotation | Rotation (`object`) | yes | Rotation of the texture | `shift properties` >Object to shift the background position | Property | Type | Default value | Description | | -------- | ------ | --------------| ----------------------- | | right | number | - | Right coordinates | | left | number | - | Left coordinates | | top | number | - | Top coordinates | `rotation properties` >Object to set the background rotation | Property | Type | Default value | Description | | -------- | --------------- | --------------| ----------------------- | | axis | Axis (`string`) | - | Rotation axis | | value | number | - | Rotation value | `axis values` >"RIGHT" | "LEFT" | "TOP" ```javascript clear() ``` >Cleans the isometric text (set an empty string in the native SVG text element) ```javascript addAnimation(animation) ``` >Adds an animated tranform element to the isometric text (not compatible with Internet Explorer). These are the properties of the `SVGTextAnimation` object: | Property | Type | Optional | Default | Description | | --------------- | -------- | --------- | ------- | ------------------------------------------------ | | property | string | no | - | Indicates which property should be animated | | duration | number | yes | 1 | Indicates the number of seconds of the animation | | repeat | number | yes | 0 | Number of times that the animation will run. `0` runs indefinitely | | from | string / number | yes | - | Initial value of the animation (if this property is used, `values` property can't be used) | | to | string / number | yes | - | Final value of the animation (if this property is used, `values` property can't be used) | | values | string / number / string[] / number[] | yes | - | All the values of the animation (if this property is used, `from` and `to` properties can't be used) | These are the properties that can be animated (property `property`) * fillColor * fillOpacity * strokeColor * strokeOpacity * strokeWidth * right * left * top * rotation ```javascript removeAnimationByIndex(index) ``` >Remove an especific animation element by its index. ```javascript removeAnimations() ``` >Remove all the animation elements. ```javascript addEventListener(type, callback, [useCapture]) ``` >Sets up a function that will be called whenever the specified event is delivered to the isometric text (the SVG text element) | Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean | ```javascript removeEventListener(type, listener, [useCapture]) ``` >Removes from the isometric text (the SVG text element) an event listener previously registered with `addEventListener` | Parameter | Type | | --------------- | ------------- | | type | string | | callback | VoidFunction | | callback | boolean |

| Property | Type | Description | | --------------- | ------------------ | --------------------------------------------------------------------- | | id | string | Gets and sets the id of the isometric text. This property also sets the id of the native `SVG` element | | planeView | string | Gets and sets the plane view in which the isometric text is created | | right | number | Gets and sets the right isometric coordinates of the isometric text | | left | number | Gets and sets the left isometric coordinates of the isometric text | | top | number | Gets and sets the top isometric coordinates of the isometric text | | fontFamily | string | Gets and sets the font-family of the isometric text | | fontSize | string | Gets and sets the font-size of the isometric text | | fontStyle | string literal | Gets and sets the font-style of the isometric text | | fontWeight | number | string literal | Gets and sets the font-weight of the isometric text | | rotation | number | Gets and sets the rotation of the isometric text | | origin | string literal tuple | Gets and sets the origin of the isometric text position and transformations| | selectable | boolean | Gets and sets the ability of the isometric text of being selectable | | fillColor | string | Gets and sets the fill color of the isometric text | | fillOpacity | number | Gets and sets the fill opacity of the isometric text | | strokeColor | string | Gets and sets the stroke color of the isometric text | | strokeOpacity | number | Gets and sets the stroke opacity of the isometric text | | strokeDashArray | number[] | Gets and sets the [SVG stroke dasharray][1] of the isometric text | | strokeLinecap | string | Gets and sets the [SVG stroke linecap][2] of the isometric text | | strokeLinejoin | string | Gets and sets the [SVG stroke linejoin][3] of the isometric text | | strokeWidth | number | Gets and sets the stroke width of the isometric text | | texture | Texture (`object`) | Gets and sets the texture of the isometric text | | className | string | Gets and sets the CSS class of the isometric text | `planeView values` >"TOP" | "FRONT" | "SIDE" `fontStyle values` >"normal" | "italic" | "oblique" `fontWeight values` >number | "normal" | "bold" | "bolder" | "lighter" `origin values` >["left" | "center" | "right", "top" | "center", "bottom"] `texture properties` >Object to set the texture of the isometric text | Property | Type | Default value | Description | | --------------- | -------------------- | ---------------- | -------------------------------------------------------------------- | | url | string | - | URL of the image texture | | planeView | PlaneView (`string`) | parent planeView | Sets the texture plane view. By default it takes the isometric text plane view | | height | number | - | Sets the texture height | | width | number | - | Sets the texture width | | scale | number | - | Sets the scale of the texture | | pixelated | boolean | - | Sets the image rendering of the texture | | shift | Point (`object`) | - | Shifts the background position | | rotation | Rotation (`object`) | - | Set the rotation of the texture | `shift properties` >Object to shift the background position | Property | Type | Default value | Description | | -------- | ------ | --------------| ----------------------- | | right | number | - | Right coordinates | | left | number | - | Left coordinates | | top | number | - | Top coordinates | `rotation properties` >Object to set the background rotation | Property | Type | Default value | Description | | -------- | --------------- | --------------| ----------------------- | | axis | Axis (`string`) | - | Rotation axis | | value | number | - | Rotation value | `axis values` >"RIGHT" | "LEFT" | "TOP"