{"id":20961666,"url":"https://github.com/elchininet/isometric","last_synced_at":"2025-04-09T23:18:53.618Z","repository":{"id":36574888,"uuid":"228677595","full_name":"elchininet/isometric","owner":"elchininet","description":"A lightweight JavaScript library, written in TypeScript, to create isometric projections using SVGs","archived":false,"fork":false,"pushed_at":"2025-04-08T21:42:56.000Z","size":3858,"stargazers_count":156,"open_issues_count":0,"forks_count":12,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-09T23:18:47.826Z","etag":null,"topics":["2d","2d-graphics","2d-library","coordinates","draw","drawing","engineering-drawing","graphics","isometric","isometric-paths","isometric-projection","isometric-projections","javascript","javascript-library","orthogonal","orthogonal-projection","projection","svg","svgs","typescript"],"latest_commit_sha":null,"homepage":"https://elchininet.github.io/isometric/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elchininet.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":"elchininet"}},"created_at":"2019-12-17T18:27:00.000Z","updated_at":"2025-04-08T21:42:57.000Z","dependencies_parsed_at":"2023-12-31T10:28:29.688Z","dependency_job_id":"21ee3fb5-19b5-488e-a9f4-6eb26ebab066","html_url":"https://github.com/elchininet/isometric","commit_stats":{"total_commits":172,"total_committers":2,"mean_commits":86.0,"dds":"0.14534883720930236","last_synced_commit":"6f860b05111d3a6ac8f3092a862f5e098eb50ba4"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elchininet%2Fisometric","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elchininet%2Fisometric/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elchininet%2Fisometric/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elchininet%2Fisometric/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elchininet","download_url":"https://codeload.github.com/elchininet/isometric/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248125614,"owners_count":21051772,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["2d","2d-graphics","2d-library","coordinates","draw","drawing","engineering-drawing","graphics","isometric","isometric-paths","isometric-projection","isometric-projections","javascript","javascript-library","orthogonal","orthogonal-projection","projection","svg","svgs","typescript"],"created_at":"2024-11-19T02:15:13.645Z","updated_at":"2025-04-09T23:18:53.595Z","avatar_url":"https://github.com/elchininet.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://elchininet.github.io/isometric/\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/elchininet/isometric/master/demo/images/logo.png\" width=\"400\" title=\"isometric\" /\u003e\n    \u003c/a\u003e\n    \u003cbr\u003e\n    A lightweight JavaScript library written in TypeScript to create isometric projections using SVGs\n\u003c/p\u003e\n\n[![Deployment Status](https://github.com/elchininet/isometric/actions/workflows/deploy.yaml/badge.svg)](https://github.com/elchininet/isometric/actions/workflows/deploy.yaml)\n[![Test](https://github.com/elchininet/isometric/actions/workflows/test.yaml/badge.svg)](https://github.com/elchininet/isometric/actions/workflows/test.yaml)\n[![Coverage Status](https://coveralls.io/repos/github/elchininet/isometric/badge.svg?branch=master)](https://coveralls.io/github/elchininet/isometric?branch=master)\n[![npm version](https://badge.fury.io/js/%40elchininet%2Fisometric.svg)](https://badge.fury.io/js/%40elchininet%2Fisometric)\n\n## Demo\n\nhttps://elchininet.github.io/isometric/\n\n## Installation\n\n#### Using NPM\n\n```\nnpm install @elchininet/isometric\n```\n\n#### Using PNPM\n\n```\npnpm add @elchininet/isometric\n```\n\n#### Using Yarn\n\n```\nyarn add @elchininet/isometric\n```\n\n#### In the browser\n\n##### Importing the package as an external script in the HTML code\n\nIt is possible to include a compiled version of the package directly in an HTML file. It will create a global `isometric` object that can be accessed from anywhere in your JavaScript code.\n\n1. Copy the JavaScript file `isometric.js`, located in the `dist/web` folder\n2. Put it in the folder that you prefer in your web server\n3. Include it in your HTML file\n\n```javascript\n\u003cscript src=\"wherever/you/installed/isometric.js\"\u003e\u003c/script\u003e\n```\n\n```javascript\n/* There will be a global variable named isometric containing all the classes */\nisometric.IsometricCanvas;\nisometric.IsometricGroup;\nisometric.IsometricRectangle;\nisometric.IsometricCircle;\nisometric.IsometricStarPolygon;\nisometric.IsometricPentagram;\nisometric.IsometricPath;\n```\n\n##### Importing the package in your code using CommonJS\n\n```javascript\nconst {\n    IsometricCanvas,\n    IsometricGroup,\n    IsometricRectangle,\n    IsometricCircle,\n    IsometricStarPolygon,\n    IsometricPentagram,\n    IsometricPath\n} = require('@elchininet/isometric');\n```\n\n##### Importing the package in your code using ES6 modules\n\n```javascript\nimport {\n    IsometricCanvas,\n    IsometricGroup,\n    IsometricRectangle,\n    IsometricCircle,\n    IsometricStarPolygon,\n    IsometricPentagram,\n    IsometricPath\n} from '@elchininet/isometric';\n```\n\n#### In node environments\n\n\u003e To use the package in a Node environment, you need to install [jsdom](https://github.com/jsdom/jsdom) because the package needs it to work properly. \n\n##### Importing the package in your code using CommonJS\n\n```javascript\nconst {\n    IsometricCanvas,\n    IsometricGroup,\n    IsometricRectangle,\n    IsometricCircle,\n    IsometricStarPolygon,\n    IsometricPentagram,\n    IsometricPath\n} = require('@elchininet/isometric/node');\n```\n\n##### Importing the package in your code using ES6 modules\n\n```javascript\nimport {\n    IsometricCanvas,\n    IsometricGroup,\n    IsometricRectangle,\n    IsometricCircle,\n    IsometricStarPolygon,\n    IsometricPentagram,\n    IsometricPath\n} from '@elchininet/isometric/node';\n```\n\n#### In Deno\n\nTo import the package in [Deno](https://deno.land/), use the main esm version using any content delivery as [UNPKG](https://unpkg.com/) or [JSDELIVR](https://www.jsdelivr.com/). The package contains a reference directive to the `d.ts` file so you can get type checking importing it without doing anything special.\n\n```javascript\nimport {\n    IsometricCanvas,\n    IsometricGroup,\n    IsometricRectangle,\n    IsometricCircle,\n    IsometricStarPolygon,\n    IsometricPentagram,\n    IsometricPath\n} from 'https://cdn.jsdelivr.net/npm/@elchininet/isometric/esm/index.js';\n```\n\n## Scripts\n\n#### build\n\n`npm run build`\n\nTranspiles the `TypeScript` code and creates the necesary package bundles:\n\n| Bundle path        | Environment | Module type |\n| ------------------ | ----------- | ----------- |\n| `web/isometric.js` | Browser     | IIFE        |\n| `index.js`         | Browser     | CommonJS    |\n| `esm/index.js`     | Browser     | ESM         |\n| `index.node.js`    | Node        | CommonJS    |\n| `esm/index.node.js`| Node        | ESM         |\n\n#### lint\n\n`npm run lint`\n\nRuns eslint in source files.\n\n#### test\n\n`npm run test`\n\nRuns tests.\n\n#### demo\n\n`npm run demo`\n\nOpens a development server that provides live reloading using [webpack-dev-server](https://github.com/webpack/webpack-dev-server). Some demo examples located in the `@demo` folder will be shown. You can modify the code of the demos and the changes will be live reloaded in the browser.\n\n## API\n\n### Class IsometricCanvas\n\nThis is the base class, it creates an isometric canvas (an SVG object)\n\n```javascript\nconst isometric = new IsometricCanvas([properties]);\n```\n\n\u003cdetails\u003e\u003csummary\u003eParameters\u003c/summary\u003e\n\u003cp\u003e\n\n`properties` _(optional)_\n\u003eObject to set the properties of the isometric canvas\n\n| Property        | Type                 | Default value  | Description                                       |\n| --------------- | -------------------- | -------------- | ------------------------------------------------- |\n| 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 |\n| id              | string               | random         | Sets the id of the isometric canvas. It also sets the id of the native SVG element |\n| backgroundColor | string               | \"white\"        | Sets the background color of the isometric canvas |\n| scale           | number               | 1              | Sets the scale multiplier of each isometric unit  |\n| height          | number               | 480            | Sets the height of the isometric canvas           |\n| width           | number               | 640            | Sets the width of the isometric canvas            |\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eInstance Methods\u003c/summary\u003e\n\u003cp\u003e\n\n\u003eAll the instance methods (excluding `getElement`, `getChildByIndex`, `getChildById`, and `getSVGCode`) return the same instance, so they are chainable.\n\n```javascript\ngetElement()\n```\n\u003eReturns the native `SVG` element\n\n```javascript\ngetSVGCode()\n```\n\u003eReturns the HTML code of the `SVG` element\n\n```javascript\naddChild(child)\n```\n\u003eAdds a child to the isometric canvas\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| child           | Any isometric element |\n\n```javascript\naddChildren(child, child, child...)\n```\n\u003eAdds multiple children to the isometric canvas\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| child           | Any isometric element |\n\n```javascript\ngetChildByIndex(index)\n```\n\u003eGets a child taking into account its index\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| index           | number        |\n\n```javascript\ngetChildById(id)\n```\n\u003eGets a child taking into account its id\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| id              | string        |\n\n```javascript\nremoveChild(child)\n```\n\u003eRemoves a child from the isometric canvas\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| child           | Any isometric element |\n\n```javascript\nremoveChildren(child, child, child...)\n```\n\u003eRemoves multiple children from the isometric canvas\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| child           | Any isometric element |\n\n```javascript\nremoveChildByIndex(index)\n```\n\u003eRemoves a child taking into account its index in the elements tree\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| index           | number        |\n\n```javascript\nremoveChildById(id)\n```\n\u003eRemoves a child taking into account its id\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| id              | string        |\n\n```javascript\nsetChildIndex(child, index)\n```\n\u003eChange the index of a child of the isometric canvas. This method also changes the index of the native elements inside the SVG.\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| child           | Any isometric element |\n| index           | number        |\n\n```javascript\nbringChildToFront(child)\n```\n\u003eChange 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.\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| child           | Any isometric element |\n\n```javascript\nsendChildToBack(child)\n```\n\u003eChange 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.\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| child           | Any isometric element |\n\n```javascript\nbringChildForward(child)\n```\n\u003eChange 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.\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| child           | Any isometric element |\n\n```javascript\nsendChildBackward(child)\n```\n\u003eChange 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.\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| child           | Any isometric element |\n\n```javascript\nupdate()\n```\n\u003eUpdates the entire isometric canvas and its children\n\n```javascript\nclear()\n```\n\u003eCleans the isometric canvas (removes all the children from it and all the native SVG elements from the SVG)\n\n```javascript\npauseAnimations()\n```\n\u003ePause all the animations (not compatible with Internet Explorer)\n\n```javascript\nresumeAnimations()\n```\n\u003eResume all the animations (not compatible with Internet Explorer)\n\n```javascript\naddEventListener(type, callback, [useCapture])\n```\n\u003eSets up a function that will be called whenever the specified event is delivered to the isometric canvas (the SVG element)\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| type            | string        |\n| callback        | VoidFunction  |\n| callback        | boolean       |\n\n```javascript\nremoveEventListener(type, callback, [useCapture])\n```\n\u003eRemoves from the isometric canvas (the SVG element) an event listener previously registered with `addEventListener`\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| type            | string        |\n| callback        | VoidFunction  |\n| callback        | boolean       |\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eInstance Properties\u003c/summary\u003e\n\u003cp\u003e\n\n| Property        | Type     | Description                                                       |\n| --------------- | -------- | ----------------------------------------------------------------- |\n| id              | string   | Gets and sets the id of the isometric canvas. This property also sets the id of the native `SVG` element |\n| backgroundColor | string   | Gets and sets the background color of the isometric canvas        |\n| scale           | number   | Gets and sets the multiplier scale of the isometric canvas        |\n| height          | number   | Gets and sets the height of the isometric canvas                  |\n| width           | number   | Gets and sets the width of the isometric canvas                   |\n| children        | array    | Gets an array of the isometric canvas children elements           |\n| animated        | boolean  | Gets if the SVG is animations are paused or are running           |\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n### Class IsometricGroup\n\nThis class can be used to group multiple isometric elements and translate them together.\n\n```javascript\nconst isometric = new IsometricGroup([properties]);\n```\n\n\u003cdetails\u003e\u003csummary\u003eParameters\u003c/summary\u003e\n\u003cp\u003e\n\n`properties` _(optional)_\n\u003eObject to set the properties of the isometric canvas\n\n| Property        | Type                 | Default value  | Description                                                  |\n| --------------- | -------------------- | -------------- | ------------------------------------------------------------ |\n| id              | string               | random         | Sets the id of the isometric group. It also sets the id of the native SVG element |\n| right           | number               | 0              | Sets the right isometric coordinates of the isometric group  |\n| left            | number               | 0              | Sets the left isometric coordinates of the isometric group   |\n| top             | number               | 0              | Sets the top isometric coordinates of the isometric group    |\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eInstance Methods\u003c/summary\u003e\n\u003cp\u003e\n\n\u003eAll the instance methods (excluding `getChildByIndex`, `getChildById`, and `getElement`) return the same instance, so they are chainable.\n\n```javascript\ngetElement()\n```\n\u003eReturns the native `g` element\n\n```javascript\naddChild(child)\n```\n\u003eAdds a child to the isometric group\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| child           | Any isometric element |\n\n```javascript\naddChildren(child, child, child...)\n```\n\u003eAdds multiple children to the isometric group\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| child           | Any isometric element |\n\n```javascript\ngetChildByIndex(index)\n```\n\u003eGets a child taking into account its index\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| index           | number        |\n\n```javascript\ngetChildById(id)\n```\n\u003eGets a child taking into account its id\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| id              | string        |\n\n```javascript\nremoveChild(child)\n```\n\u003eRemoves a child from the isometric group\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| child           | Any isometric element |\n\n```javascript\nremoveChildren(child, child, child...)\n```\n\u003eRemoves multiple children from the isometric group\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| child           | Any isometric element |\n\n```javascript\nremoveChildByIndex(index)\n```\n\u003eRemoves a child taking into account its index in the elements tree\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| index           | number        |\n\n```javascript\nremoveChildById(id)\n```\n\u003eRemoves a child taking into account its id\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| id              | string        |\n\n```javascript\nsetChildIndex(child, index)\n```\n\u003eChange the index of a child of the isometric group. This method also changes the index of the native elements inside the `g` element.\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| child           | Any isometric element |\n| index           | number        |\n\n```javascript\nbringChildToFront(child)\n```\n\u003eChange 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.\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| child           | Any isometric element |\n\n```javascript\nsendChildToBack(child)\n```\n\u003eChange 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.\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| child           | Any isometric element |\n\n```javascript\nbringChildForward(child)\n```\n\u003eChange 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.\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| child           | Any isometric element |\n\n```javascript\nsendChildBackward(child)\n```\n\u003eChange 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.\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| child           | Any isometric element |\n\n```javascript\nupdate()\n```\n\u003eUpdates the entire isometric group and its children\n\n```javascript\nclear()\n```\n\u003eCleans the isometric group (removes all the children from it and all the native SVG elements from the `g` element)\n\n```javascript\naddEventListener(type, callback, [useCapture])\n```\n\u003eSets up a function that will be called whenever the specified event is delivered to the isometric group (the `g` element)\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| type            | string        |\n| callback        | VoidFunction  |\n| callback        | boolean       |\n\n```javascript\nremoveEventListener(type, callback, [useCapture])\n```\n\u003eRemoves from the isometric group (the `g` element) an event listener previously registered with `addEventListener`\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| type            | string        |\n| callback        | VoidFunction  |\n| callback        | boolean       |\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eInstance Properties\u003c/summary\u003e\n\u003cp\u003e\n\n| Property        | Type     | Description                                                          |\n| --------------- | -------- | -------------------------------------------------------------------- |\n| id              | string   | Gets and sets the id of the isometric group. This property also sets the id of the native `SVG` element |\n| right           | number   | Gets and sets the right isometric coordinates of the isometric group |\n| left            | number   | Gets and sets the left isometric coordinates of the isometric group  |\n| top             | number   | Gets and sets the top isometric coordinates of the isometric group   |\n| children        | array    | Gets an array of the isometric group children elements               |\n| drag \\*         | PlaneView (`string`) / false | Gets an sets the dragging plane of the isometric group |\n| bounds          | object / false | Gets an sets the boundaries of the isometric group position          |\n\n\u003e\\* 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.\n\n`planeView values`\n\u003e\"TOP\" | \"FRONT\" | \"SIDE\" | false\n\n`bounds properties`\n\u003eObject to set the boundaries of the isometric group position. If it is set as false the isometric group will not have boundaries.\n\n| Property  | Type             | Default value | Description                                             |\n| --------- | ---------------- | ------------- | ------------------------------------------------------- |\n| right     | [number, number] | -             | Minimum and maximum boundaries of the right coordinates |\n| left      | [number, number] | -             | Minimum and maximum boundaries of the left coordinates  |\n| top       | [number, number] | -             | Minimum and maximum boundaries of the top coordinates   |\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n### Class IsometricRectangle\n\nThis class is to create isometric rectangles that can be added to the isometric canvas or to isometric groups.\n\n```javascript\nconst path = new IsometricRectangle(properties);\n```\n\n\u003cdetails\u003e\u003csummary\u003eParameters\u003c/summary\u003e\n\u003cp\u003e\n\n`properties`\n\u003eObject to set the properties of the isometric rectangle\n\n| Property        | Type                 | Default value | Description                                                          |\n| --------------- | -------------------- | ------------- | -------------------------------------------------------------------- |\n| id              | string               | random        | Sets the id of the isometric rectangle. It also sets the id of the native SVG element |\n| height          | number               | -             | Sets the height of the isometric rectangle                           |\n| width           | number               | -             | Sets the width of the isometric rectangle                            |\n| right           | number               | 0             | Sets the right isometric coordinates of the isometric rectangle      |\n| left            | number               | 0             | Sets the left isometric coordinates of the isometric rectangle       |\n| top             | number               | 0             | Sets the top isometric coordinates of the isometric rectangle        |\n| planeView       | PlaneView (`string`) | -             | Sets the plane view in which the isometric rectangle will be created |\n| fillColor       | string               | \"white\"       | Sets the fill color of the isometric rectangle                       |\n| fillOpacity     | number               | 1             | Sets the fill opacity of the isometric rectangle                     |\n| strokeColor     | string               | \"black\"       | Sets the stroke color of the isometric rectangle                     |\n| strokeOpacity   | number               | 1             | Sets stroke opacity of the isometric rectangle                       |\n| strokeDashArray | number[]             | []            | Sets the [SVG stroke dasharray][1] of the isometric rectangle        |\n| strokeLinecap   | string               | \"butt\"        | Sets the [SVG stroke linecap][2] of the isometric rectangle          |\n| strokeLinejoin  | string               | \"round\"       | Sets the [SVG stroke linejoin][3] of the isometric rectangle         |\n| strokeWidth     | number               | 1             | Sets the stroke width of the isometric rectangle                     |\n| texture         | Texture (`object`)   | -             | Sets the texture of the isometric rectangle                          |\n| className       | string               | -             | Sets the CSS class of the isometric rectangle                        |\n\n`planeView values`\n\u003e\"TOP\" | \"FRONT\" | \"SIDE\"\n\n`texture properties`\n\u003eObject to set the texture of the isometric rectangle\n\n| Property        | Type                 | Default value    | Description                                                          |\n| --------------- | -------------------- | ---------------- | -------------------------------------------------------------------- |\n| url             | string               | -                | URL of the image texture                                             |\n| planeView       | PlaneView (`string`) | parent planeView | Sets the texture plane view. By default it takes the isometric rectangle plane view |\n| height          | number               | -                | Sets the texture height                                              |\n| width           | number               | -                | Sets the texture width                                               |\n| scale           | number               | -                | Sets the scale of the texture                                        |\n| pixelated       | boolean              | -                | Sets the image rendering of the texture                              |\n| shift           | Point (`object`)     | -                | Shifts the background position                                       |\n| rotation        | Rotation (`object`)  | -                | Set the rotation of the texture                                      |\n\n`shift properties`\n\u003eObject to shift the background position\n\n| Property | Type   | Default value | Description             |\n| -------- | ------ | --------------| ----------------------- |\n| right    | number | -             | Right coordinates       |\n| left     | number | -             | Left coordinates        |\n| top      | number | -             | Top coordinates         |\n\n`rotation properties`\n\u003eObject to set the background rotation\n\n| Property | Type            | Default value | Description             |\n| -------- | --------------- | --------------| ----------------------- |\n| axis     | Axis (`string`) | -             | Rotation axis           |\n| value    | number          | -             | Rotation value          |\n\n`axis values`\n\u003e\"RIGHT\" | \"LEFT\" | \"TOP\"\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eInstance Methods\u003c/summary\u003e\n\u003cp\u003e\n\n\u003eAll the instance methods (except `getElement` and `getPattern`) return the same instance, so they are chainable.\n\n```javascript\ngetElement()\n```\n\u003eReturns the native `SVG` path element\n\n```javascript\ngetPattern()\n```\n\u003eReturns the native `SVGPatternElement` responsible for the texture\n\n```javascript\nupdate()\n```\n\u003eForces a re-render of the SVG rectangle\n\n```javascript\nupdateTexture(texture)\n```\n\u003eAdds or override the texture properties\n\n| Property  | Type                 | Optional  | Description                                     |\n| --------- | -------------------- | --------- | ----------------------------------------------- |\n| url       | string               | yes       | URL of the image texture                        |\n| planeView | PlaneView (`string`) | yes       | Texture plane view                              |\n| height    | number               | yes       | Texture height                                  |\n| width     | number               | yes       | Texture width                                   |\n| scale     | number               | yes       | Texture scale                                   |\n| pixelated | boolean              | yes       | Image rendering of the texture                  |\n| shift     | Point (`object`)     | yes       | Shifts the background position                  |\n| rotation  | Rotation (`object`)  | yes       | Rotation of the texture                         |\n\n`shift properties`\n\u003eObject to shift the background position\n\n| Property | Type   | Default value | Description             |\n| -------- | ------ | --------------| ----------------------- |\n| right    | number | -             | Right coordinates       |\n| left     | number | -             | Left coordinates        |\n| top      | number | -             | Top coordinates         |\n\n`rotation properties`\n\u003eObject to set the background rotation\n\n| Property | Type            | Default value | Description             |\n| -------- | --------------- | --------------| ----------------------- |\n| axis     | Axis (`string`) | -             | Rotation axis           |\n| value    | number          | -             | Rotation value          |\n\n`axis values`\n\u003e\"RIGHT\" | \"LEFT\" | \"TOP\"\n\n```javascript\nclear()\n```\n\u003eCleans the isometric rectangle (removes all the path commands from the native SVG path element)\n\n```javascript\naddAnimation(animation)\n```\n\u003eAdds an animated element to the isometric Rectangle (not compatible with Internet Explorer). These are the properties of the `SVGRectangleAnimation` object:\n\n| Property        | Type     | Optional  | Default |  Description                                     |\n| --------------- | -------- | --------- | ------- | ------------------------------------------------ |\n| property        | string   | no        | -       | Indicates which property should be animated      |\n| duration        | number   | yes       | 1       | Indicates the number of seconds of the animation |\n| repeat          | number   | yes       | 0       | Number of times that the animation will run. `0` runs indefinitely |\n| from            | string / number | yes | - | Initial value of the animation (if this property is used, `values` property can't be used) |\n| to              | string / number | yes | - | Final value of the animation (if this property is used, `values` property can't be used) |\n| 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) |\n\nThese are the properties that can be animated (property `property`)\n\n* fillColor\n* fillOpacity\n* strokeColor\n* strokeOpacity\n* strokeWidth\n* right\\*\n* left\\*\n* top\\*\n* width\\*\n* height\\*\n\n\u003e\\* 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.\n\n```javascript\nremoveAnimationByIndex(index)\n```\n\u003eRemove an especific animation element by its index.\n\n```javascript\nremoveAnimations()\n```\n\u003eRemove all the animation elements.\n\n```javascript\naddEventListener(type, callback, [useCapture])\n```\n\u003eSets up a function that will be called whenever the specified event is delivered to the isometric rectangle (the SVG path element)\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| type            | string        |\n| callback        | VoidFunction  |\n| callback        | boolean       |\n\n```javascript\nremoveEventListener(type, listener, [useCapture])\n```\n\u003eRemoves from the isometric rectangle (the SVG path element) an event listener previously registered with `addEventListener`\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| type            | string        |\n| callback        | VoidFunction  |\n| callback        | boolean       |\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eInstance Properties\u003c/summary\u003e\n\u003cp\u003e\n\n| Property        | Type               | Description                                                              |\n| --------------- | ------------------ | ------------------------------------------------------------------------ |\n| id              | string             | Gets and sets the id of the isometric rectangle. This property also sets the id of the native `SVG` element |\n| height          | number             | Gets and sets the height of the isometric rectangle                      |\n| width           | number             | Gets and sets the width of the isometric rectangle                       |\n| right           | number             | Gets and sets the right isometric coordinates of the isometric rectangle |\n| left            | number             | Gets and sets the left isometric coordinates of the isometric rectangle  |\n| top             | number             | Gets and sets the top isometric coordinates of the isometric rectangle   |\n| planeView       | string             | Gets and sets the plane view in which the isometric rectangle is created |\n| fillColor       | string             | Gets and sets the fill color of the isometric rectangle                  |\n| fillOpacity     | number             | Gets and sets the fill opacity of the isometric rectangle                |\n| strokeColor     | string             | Gets and sets the stroke color of the isometric rectangle                |\n| strokeOpacity   | number             | Gets and sets the stroke opacity of the isometric rectangle              |\n| strokeDashArray | number[]           | Gets and sets the [SVG stroke dasharray][1] of the isometric rectangle   |\n| strokeLinecap   | string             | Gets and sets the [SVG stroke linecap][2] of the isometric rectangle     |\n| strokeLinejoin  | string             | Gets and sets the [SVG stroke linejoin][3] of the isometric rectangle    |\n| strokeWidth     | number             | Gets and sets the stroke width of the isometric rectangle                |\n| texture         | Texture (`object`) | Gets and sets the texture of the isometric rectangle                     |\n| drag \\*         | PlaneView (`string`) / false | Gets an sets the dragging plane of the isometric rectangle     |\n| bounds          | object / false | Gets and sets the boundaries of the isometric rectangle position             |\n| className       | string             | Gets and sets the CSS class of the isometric rectangle                   |\n\n\u003e\\* 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.\n\n`planeView values`\n\u003e\"TOP\" | \"FRONT\" | \"SIDE\" | false\n\n`bounds properties`\n\u003eObject to set the boundaries of the isometric rectangle position. If it is set as false the isometric rectangle will not have boundaries.\n\n| Property  | Type             | Default value | Description                                             |\n| --------- | ---------------- | ------------- | ------------------------------------------------------- |\n| right     | [number, number] | -             | Minimum and maximum boundaries of the right coordinates |\n| left      | [number, number] | -             | Minimum and maximum boundaries of the left coordinates  |\n| top       | [number, number] | -             | Minimum and maximum boundaries of the top coordinates   |\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n### Class IsometricCircle\n\nThis class is to create isometric circles that can be added to the isometric canvas.\n\n```javascript\nconst path = new IsometricCircle(properties);\n```\n\n\u003cdetails\u003e\u003csummary\u003eParameters\u003c/summary\u003e\n\u003cp\u003e\n\n`properties`\n\u003eObject to set the properties of the isometric circle\n\n| Property        | Type                 | Default value        | Description                                                       |\n| --------------- | -------------------- | -------------------- | ----------------------------------------------------------------- |\n| id              | string               | random               | Sets the id of the isometric circle. It also sets the id of the native SVG element |\n| radius          | number               | -                    | Sets the radius of the isometric circle                           |\n| right           | number               | 0                    | Sets the right isometric coordinates of the isometric circle      |\n| left            | number               | 0                    | Sets the left isometric coordinates of the isometric circle       |\n| top             | number               | 0                    | Sets the top isometric coordinates of the isometric circle        |\n| planeView       | PlaneView (`string`) | -                    | Sets the plane view in which the isometric circle will be created |\n| fillColor       | string               | \"white\"              | Sets the fill color of the isometric circle                       |\n| fillOpacity     | number               | 1                    | Sets the fill opacity of the isometric circle                     |\n| strokeColor     | string               | \"black\"              | Sets the stroke color of the isometric circle                     |\n| strokeOpacity   | number               | 1                    | Sets stroke opacity of the isometric circle                       |\n| strokeDashArray | number[]             | []                   | Sets the [SVG stroke dasharray][1] of the isometric circle        |\n| strokeLinecap   | string               | \"butt\"               | Sets the [SVG stroke linecap][2] of the isometric circle          |\n| strokeLinejoin  | string               | \"round\"              | Sets the [SVG stroke linejoin][3] of the isometric circle         |\n| strokeWidth     | number               | 1                    | Sets the stroke width of the isometric circle                     |\n| texture         | Texture (`object`)   | -                    | Sets the texture of the isometric circle                          |\n| className       | string               | -                    | Sets the CSS class of the isometric circle                        |\n\n`planeView values`\n\u003e\"TOP\" | \"FRONT\" | \"SIDE\"\n\n`texture properties`\n\u003eObject to set the texture of the isometric circle\n\n| Property        | Type                 | Default value    | Description                                                          |\n| --------------- | -------------------- | ---------------- | -------------------------------------------------------------------- |\n| url             | string               | -                | URL of the image texture                                             |\n| planeView       | PlaneView (`string`) | parent planeView | Sets the texture plane view. By default it takes the isometric circle plane view |\n| height          | number               | -                | Sets the texture height                                              |\n| width           | number               | -                | Sets the texture width                                               |\n| scale           | number               | -                | Sets the scale of the texture                                        |\n| pixelated       | boolean              | -                | Sets the image rendering of the texture                              |\n| shift           | Point (`object`)     | -                | Shifts the background position                                       |\n| rotation        | Rotation (`object`)  | -                | Set the rotation of the texture                                      |\n\n`shift properties`\n\u003eObject to shift the background position\n\n| Property | Type   | Default value | Description             |\n| -------- | ------ | --------------| ----------------------- |\n| right    | number | -             | Right coordinates       |\n| left     | number | -             | Left coordinates        |\n| top      | number | -             | Top coordinates         |\n\n`rotation properties`\n\u003eObject to set the background rotation\n\n| Property | Type            | Default value | Description             |\n| -------- | --------------- | --------------| ----------------------- |\n| axis     | Axis (`string`) | -             | Rotation axis           |\n| value    | number          | -             | Rotation value          |\n\n`axis values`\n\u003e\"RIGHT\" | \"LEFT\" | \"TOP\"\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eInstance Methods\u003c/summary\u003e\n\u003cp\u003e\n\n\u003eAll the instance methods (except `getElement` and `getPattern`) return the same instance, so they are chainable.\n\n```javascript\ngetElement()\n```\n\u003eReturns the native `SVG` path element\n\n```javascript\ngetPattern()\n```\n\u003eReturns the native `SVGPatternElement` responsible for the texture\n\n```javascript\nupdate()\n```\n\u003eForces a re-render of the SVG circle\n\n```javascript\nupdateTexture(texture)\n```\n\u003eAdds or override the texture properties\n\n| Property  | Type                 | Optional  | Description                                     |\n| --------- | -------------------- | --------- | ----------------------------------------------- |\n| url       | string               | yes       | URL of the image texture                        |\n| planeView | PlaneView (`string`) | yes       | Texture plane view                              |\n| height    | number               | yes       | Texture height                                  |\n| width     | number               | yes       | Texture width                                   |\n| scale     | number               | yes       | Texture scale                                   |\n| pixelated | boolean              | yes       | Image rendering of the texture                  |\n| shift     | Point (`object`)     | yes       | Shifts the background position                  |\n| rotation  | Rotation (`object`)  | yes       | Rotation of the texture                         |\n\n`shift properties`\n\u003eObject to shift the background position\n\n| Property | Type   | Default value | Description             |\n| -------- | ------ | --------------| ----------------------- |\n| right    | number | -             | Right coordinates       |\n| left     | number | -             | Left coordinates        |\n| top      | number | -             | Top coordinates         |\n\n`rotation properties`\n\u003eObject to set the background rotation\n\n| Property | Type            | Default value | Description             |\n| -------- | --------------- | --------------| ----------------------- |\n| axis     | Axis (`string`) | -             | Rotation axis           |\n| value    | number          | -             | Rotation value          |\n\n`axis values`\n\u003e\"RIGHT\" | \"LEFT\" | \"TOP\"\n\n```javascript\nclear()\n```\n\u003eCleans the isometric circle (removes all the path commands from the native SVG path element)\n\n```javascript\naddAnimation(animation)\n```\n\u003eAdds an animated element to the isometric circle (not compatible with Internet Explorer). These are the properties of the `SVGCircleAnimation` object:\n\n| Property        | Type     | Optional  | Default |  Description                                     |\n| --------------- | -------- | --------- | ------- | ------------------------------------------------ |\n| property        | string   | no        | -       | Indicates which property should be animated      |\n| duration        | number   | yes       | 1       | Indicates the number of seconds of the animation |\n| repeat          | number   | yes       | 0       | Number of times that the animation will run. `0` runs indefinitely |\n| from            | string / number | yes | - | Initial value of the animation (if this property is used, `values` property can't be used) |\n| to              | string / number | yes | - | Final value of the animation (if this property is used, `values` property can't be used) |\n| 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) |\n\nThese are the properties that can be animated (property `property`)\n\n* fillColor\n* fillOpacity\n* strokeColor\n* strokeOpacity\n* strokeWidth\n* right\\*\n* left\\*\n* top\\*\n* radius\\*\n\n\u003e\\* 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.\n\n```javascript\nremoveAnimationByIndex(index)\n```\n\u003eRemove an especific animation element by its index.\n\n```javascript\nremoveAnimations()\n```\n\u003eRemove all the animation elements.\n\n```javascript\naddEventListener(type, callback, [useCapture])\n```\n\u003eSets up a function that will be called whenever the specified event is delivered to the isometric circle (the SVG path element)\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| type            | string        |\n| callback        | VoidFunction  |\n| callback        | boolean       |\n\n```javascript\nremoveEventListener(type, listener, [useCapture])\n```\n\u003eRemoves from the isometric circle (the SVG path element) an event listener previously registered with `addEventListener`\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| type            | string        |\n| callback        | VoidFunction  |\n| callback        | boolean       |\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eInstance Properties\u003c/summary\u003e\n\u003cp\u003e\n\n| Property        | Type               | Description                                                           |\n| --------------- | ------------------ | --------------------------------------------------------------------- |\n| id              | string             | Gets and sets the id of the isometric circle. This property also sets the id of the native `SVG` element |\n| radius          | number             | Gets and sets the radius of the isometric circle                      |\n| right           | number             | Gets and sets the right isometric coordinates of the isometric circle |\n| left            | number             | Gets and sets the left isometric coordinates of the isometric circle  |\n| top             | number             | Gets and sets the top isometric coordinates of the isometric circle   |\n| planeView       | string             | Gets and sets the plane view in which the isometric circle is created |\n| fillColor       | string             | Gets and sets the fill color of the isometric circle                  |\n| fillOpacity     | number             | Gets and sets the fill opacity of the isometric circle                |\n| strokeColor     | string             | Gets and sets the stroke color of the isometric circle                |\n| strokeOpacity   | number             | Gets and sets the stroke opacity of the isometric circle              |\n| strokeDashArray | number[]           | Gets and sets the [SVG stroke dasharray][1] of the isometric circle   |\n| strokeLinecap   | string             | Gets and sets the [SVG stroke linecap][2] of the isometric circle     |\n| strokeLinejoin  | string             | Gets and sets the [SVG stroke linejoin][3] of the isometric circle    |\n| strokeWidth     | number             | Gets and sets the stroke width of the isometric circle                |\n| texture         | Texture (`object`) | Gets and sets the texture of the isometric circle                     |\n| drag \\*         | PlaneView (`string`) / false | Gets an sets the dragging plane of the isometric circle     |\n| bounds          | object / false | Gets an sets the boundaries of the isometric circle position              |\n| className       | string             | Gets and sets the CSS class of the isometric circle                   |\n\n\u003e\\* 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.\n\n`planeView values`\n\u003e\"TOP\" | \"FRONT\" | \"SIDE\" | false\n\n`bounds properties`\n\u003eObject to set the boundaries of the isometric circle position. If it is set as false the isometric circle will not have boundaries.\n\n| Property  | Type             | Default value | Description                                             |\n| --------- | ---------------- | ------------- | ------------------------------------------------------- |\n| right     | [number, number] | -             | Minimum and maximum boundaries of the right coordinates |\n| left      | [number, number] | -             | Minimum and maximum boundaries of the left coordinates  |\n| top       | [number, number] | -             | Minimum and maximum boundaries of the top coordinates   |\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n### Class IsometricStarPolygon\n\nThis class is to create isometric star polygons that can be added to the isometric canvas.\n\n```javascript\nconst path = new IsometricStarPolygon(properties);\n```\n\n\u003cdetails\u003e\u003csummary\u003eParameters\u003c/summary\u003e\n\u003cp\u003e\n\n`properties`\n\u003eObject to set the properties of the isometric star polygon\n\n| Property        | Type                 | Default value        | Description                                                             |\n| --------------- | -------------------- | -------------------- | ----------------------------------------------------------------------- |\n| id              | string               | random               | Sets the id of the isometric star polygon. It also sets the id of the native SVG element |\n| radius          | number               | -                    | Sets the radius of the isometric star polygon                           |\n| points          | number               | -                    | Sets the number of points of the isometric star polygon                 |\n| density         | number               | -                    | Sets the density of the isometric star polygon                          |\n| rotation        | number               | -                    | Sets the rotation of the isometric star polygon                         |\n| right           | number               | 0                    | Sets the right isometric coordinates of the isometric star polygon      |\n| left            | number               | 0                    | Sets the left isometric coordinates of the isometric star polygon       |\n| top             | number               | 0                    | Sets the top isometric coordinates of the isometric star polygon        |\n| planeView       | PlaneView (`string`) | -                    | Sets the plane view in which the isometric star polygon will be created |\n| fillColor       | string               | \"white\"              | Sets the fill color of the isometric star polygon                       |\n| fillOpacity     | number               | 1                    | Sets the fill opacity of the isometric star polygon                     |\n| strokeColor     | string               | \"black\"              | Sets the stroke color of the isometric star polygon                     |\n| strokeOpacity   | number               | 1                    | Sets stroke opacity of the isometric star polygon                       |\n| strokeDashArray | number[]             | []                   | Sets the [SVG stroke dasharray][1] of the isometric star polygon        |\n| strokeLinecap   | string               | \"butt\"               | Sets the [SVG stroke linecap][2] of the isometric star polygon          |\n| strokeLinejoin  | string               | \"round\"              | Sets the [SVG stroke linejoin][3] of the isometric star polygon         |\n| strokeWidth     | number               | 1                    | Sets the stroke width of the isometric star polygon                     |\n| texture         | Texture (`object`)   | -                    | Sets the texture of the isometric star polygon                          |\n| className       | string               | -                    | Sets the CSS class of the isometric star polygon                        |\n\n`planeView values`\n\u003e\"TOP\" | \"FRONT\" | \"SIDE\"\n\n`texture properties`\n\u003eObject to set the texture of the isometric star polygon\n\n| Property        | Type                 | Default value    | Description                                                          |\n| --------------- | -------------------- | ---------------- | -------------------------------------------------------------------- |\n| url             | string               | -                | URL of the image texture                                             |\n| planeView       | PlaneView (`string`) | parent planeView | Sets the texture plane view. By default it takes the isometric star polygon plane view |\n| height          | number               | -                | Sets the texture height                                              |\n| width           | number               | -                | Sets the texture width                                               |\n| scale           | number               | -                | Sets the scale of the texture                                        |\n| pixelated       | boolean              | -                | Sets the image rendering of the texture                              |\n| shift           | Point (`object`)     | -                | Shifts the background position                                       |\n| rotation        | Rotation (`object`)  | -                | Set the rotation of the texture                                      |\n\n`shift properties`\n\u003eObject to shift the background position\n\n| Property | Type   | Default value | Description             |\n| -------- | ------ | --------------| ----------------------- |\n| right    | number | -             | Right coordinates       |\n| left     | number | -             | Left coordinates        |\n| top      | number | -             | Top coordinates         |\n\n`rotation properties`\n\u003eObject to set the background rotation\n\n| Property | Type            | Default value | Description             |\n| -------- | --------------- | --------------| ----------------------- |\n| axis     | Axis (`string`) | -             | Rotation axis           |\n| value    | number          | -             | Rotation value          |\n\n`axis values`\n\u003e\"RIGHT\" | \"LEFT\" | \"TOP\"\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eInstance Methods\u003c/summary\u003e\n\u003cp\u003e\n\n\u003eAll the instance methods (except `getElement` and `getPattern`) return the same instance, so they are chainable.\n\n```javascript\ngetElement()\n```\n\u003eReturns the native `SVG` path element\n\n```javascript\ngetPattern()\n```\n\u003eReturns the native `SVGPatternElement` responsible for the texture\n\n```javascript\nupdate()\n```\n\u003eForces a re-render of the SVG pentagram\n\n```javascript\nupdateTexture(texture)\n```\n\u003eAdds or override the texture properties\n\n| Property  | Type                 | Optional  | Description                                     |\n| --------- | -------------------- | --------- | ----------------------------------------------- |\n| url       | string               | yes       | URL of the image texture                        |\n| planeView | PlaneView (`string`) | yes       | Texture plane view                              |\n| height    | number               | yes       | Texture height                                  |\n| width     | number               | yes       | Texture width                                   |\n| scale     | number               | yes       | Texture scale                                   |\n| pixelated | boolean              | yes       | Image rendering of the texture                  |\n| shift     | Point (`object`)     | yes       | Shifts the background position                  |\n| rotation  | Rotation (`object`)  | yes       | Rotation of the texture                         |\n\n`shift properties`\n\u003eObject to shift the background position\n\n| Property | Type   | Default value | Description             |\n| -------- | ------ | --------------| ----------------------- |\n| right    | number | -             | Right coordinates       |\n| left     | number | -             | Left coordinates        |\n| top      | number | -             | Top coordinates         |\n\n`rotation properties`\n\u003eObject to set the background rotation\n\n| Property | Type            | Default value | Description             |\n| -------- | --------------- | --------------| ----------------------- |\n| axis     | Axis (`string`) | -             | Rotation axis           |\n| value    | number          | -             | Rotation value          |\n\n`axis values`\n\u003e\"RIGHT\" | \"LEFT\" | \"TOP\"\n\n```javascript\nclear()\n```\n\u003eCleans the isometric star polygon (removes all the path commands from the native SVG path element)\n\n```javascript\naddAnimation(animation)\n```\n\u003eAdds an animated element to the isometric star polygon (not compatible with Internet Explorer). These are the properties of the `SVGPentagramAnimation` object:\n\n| Property        | Type     | Optional  | Default |  Description                                     |\n| --------------- | -------- | --------- | ------- | ------------------------------------------------ |\n| property        | string   | no        | -       | Indicates which property should be animated      |\n| duration        | number   | yes       | 1       | Indicates the number of seconds of the animation |\n| repeat          | number   | yes       | 0       | Number of times that the animation will run. `0` runs indefinitely |\n| from            | string / number | yes | - | Initial value of the animation (if this property is used, `values` property can't be used) |\n| to              | string / number | yes | - | Final value of the animation (if this property is used, `values` property can't be used) |\n| 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) |\n\nThese are the properties that can be animated (property `property`)\n\n* fillColor\n* fillOpacity\n* strokeColor\n* strokeOpacity\n* strokeWidth\n* right\\*\n* left\\*\n* top\\*\n* radius\\*\n* density\\*\n* rotation\\*\n\n\u003e\\* 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.\n\n```javascript\nremoveAnimationByIndex(index)\n```\n\u003eRemove an especific animation element by its index.\n\n```javascript\nremoveAnimations()\n```\n\u003eRemove all the animation elements.\n\n```javascript\naddEventListener(type, callback, [useCapture])\n```\n\u003eSets up a function that will be called whenever the specified event is delivered to the isometric star polygon (the SVG path element)\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| type            | string        |\n| callback        | VoidFunction  |\n| callback        | boolean       |\n\n```javascript\nremoveEventListener(type, listener, [useCapture])\n```\n\u003eRemoves from the isometric star polygon (the SVG path element) an event listener previously registered with `addEventListener`\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| type            | string        |\n| callback        | VoidFunction  |\n| callback        | boolean       |\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eInstance Properties\u003c/summary\u003e\n\u003cp\u003e\n\n| Property        | Type               | Description                                                                 |\n| --------------- | ------------------ | --------------------------------------------------------------------------- |\n| id              | string             | Gets and sets the id of the isometric star polygon. This property also sets the id of the native `SVG` element |\n| radius          | number             | Gets and sets the radius of the isometric star polygon                      |\n| rotation        | number             | Gets and sets the rotation of the isometric star polygon                    |\n| points          | number             | Gets and sets the number of points of the isometric star polygon            |\n| density         | number             | Gets and sets the density of the isometric star polygon                     |\n| right           | number             | Gets and sets the right isometric coordinates of the isometric star polygon |\n| left            | number             | Gets and sets the left isometric coordinates of the isometric star polygon  |\n| top             | number             | Gets and sets the top isometric coordinates of the isometric star polygon   |\n| planeView       | string             | Gets and sets the plane view in which the isometric star polygon is created |\n| fillColor       | string             | Gets and sets the fill color of the isometric star polygon                  |\n| fillOpacity     | number             | Gets and sets the fill opacity of the isometric star polygon                |\n| strokeColor     | string             | Gets and sets the stroke color of the isometric star polygon                |\n| strokeOpacity   | number             | Gets and sets the stroke opacity of the isometric star polygon              |\n| strokeDashArray | number[]           | Gets and sets the [SVG stroke dasharray][1] of the isometric star polygon   |\n| strokeLinecap   | string             | Gets and sets the [SVG stroke linecap][2] of the isometric star polygon     |\n| strokeLinejoin  | string             | Gets and sets the [SVG stroke linejoin][3] of the isometric star polygon    |\n| strokeWidth     | number             | Gets and sets the stroke width of the isometric star polygon                |\n| texture         | Texture (`object`) | Gets and sets the texture of the isometric star polygon                     |\n| drag \\*          | PlaneView (`string`) / false | Gets an sets the dragging plane of the isometric star polygon    |\n| bounds          | object / false | Gets and sets the boundaries of the isometric star polygon position             |\n| className       | string             | Gets and sets the CSS class of the isometric star polygon                   |\n\n\u003e\\* 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.\n\n`planeView values`\n\u003e\"TOP\" | \"FRONT\" | \"SIDE\" | false\n\n`bounds properties`\n\u003eObject to set the boundaries of the isometric star polygon position. If it is set as false the isometric star polygon will not have boundaries.\n\n| Property  | Type             | Default value | Description                                             |\n| --------- | ---------------- | ------------- | ------------------------------------------------------- |\n| right     | [number, number] | -             | Minimum and maximum boundaries of the right coordinates |\n| left      | [number, number] | -             | Minimum and maximum boundaries of the left coordinates  |\n| top       | [number, number] | -             | Minimum and maximum boundaries of the top coordinates   |\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n### Class IsometricPentagram\n\nThis class is to create isometric pentagrams (a specific star polygon with `5` points and density `2`) that can be added to the isometric canvas.\n\n```javascript\nconst path = new IsometricPentagram(properties);\n```\n\n\u003cdetails\u003e\u003csummary\u003eParameters\u003c/summary\u003e\n\u003cp\u003e\n\n`properties`\n\u003eObject to set the properties of the isometric pentagram\n\n| Property        | Type                 | Default value        | Description                                                          |\n| --------------- | -------------------- | -------------------- | -------------------------------------------------------------------- |\n| id              | string               | random               | Sets the id of the isometric pentagram. It also sets the id of the native SVG element |\n| radius          | number               | -                    | Sets the radius of the isometric pentagram                           |\n| rotation        | number               | -                    | Sets the rotation of the isometric pentagram                         |\n| right           | number               | 0                    | Sets the right isometric coordinates of the isometric pentagram      |\n| left            | number               | 0                    | Sets the left isometric coordinates of the isometric pentagram       |\n| top             | number               | 0                    | Sets the top isometric coordinates of the isometric pentagram        |\n| planeView       | PlaneView (`string`) | -                    | Sets the plane view in which the isometric pentagram will be created |\n| fillColor       | string               | \"white\"              | Sets the fill color of the isometric pentagram                       |\n| fillOpacity     | number               | 1                    | Sets the fill opacity of the isometric pentagram                     |\n| strokeColor     | string               | \"black\"              | Sets the stroke color of the isometric pentagram                     |\n| strokeOpacity   | number               | 1                    | Sets stroke opacity of the isometric pentagram                       |\n| strokeDashArray | number[]             | []                   | Sets the [SVG stroke dasharray][1] of the isometric pentagram        |\n| strokeLinecap   | string               | \"butt\"               | Sets the [SVG stroke linecap][2] of the isometric pentagram          |\n| strokeLinejoin  | string               | \"round\"              | Sets the [SVG stroke linejoin][3] of the isometric pentagram         |\n| strokeWidth     | number               | 1                    | Sets the stroke width of the isometric pentagram                     |\n| texture         | Texture (`object`)   | -                    | Sets the texture of the isometric pentagram                          |\n| className       | string               | -                    | Sets the CSS class of the isometric pentagram                        |\n\n`planeView values`\n\u003e\"TOP\" | \"FRONT\" | \"SIDE\"\n\n`texture properties`\n\u003eObject to set the texture of the isometric pentagram\n\n| Property        | Type                 | Default value    | Description                                                          |\n| --------------- | -------------------- | ---------------- | -------------------------------------------------------------------- |\n| url             | string               | -                | URL of the image texture                                             |\n| planeView       | PlaneView (`string`) | parent planeView | Sets the texture plane view. By default it takes the isometric pentagram plane view |\n| height          | number               | -                | Sets the texture height                                              |\n| width           | number               | -                | Sets the texture width                                               |\n| scale           | number               | -                | Sets the scale of the texture                                        |\n| pixelated       | boolean              | -                | Sets the image rendering of the texture                              |\n| shift           | Point (`object`)     | -                | Shifts the background position                                       |\n| rotation        | Rotation (`object`)  | -                | Set the rotation of the texture                                      |\n\n`shift properties`\n\u003eObject to shift the background position\n\n| Property | Type   | Default value | Description             |\n| -------- | ------ | --------------| ----------------------- |\n| right    | number | -             | Right coordinates       |\n| left     | number | -             | Left coordinates        |\n| top      | number | -             | Top coordinates         |\n\n`rotation properties`\n\u003eObject to set the background rotation\n\n| Property | Type            | Default value | Description             |\n| -------- | --------------- | --------------| ----------------------- |\n| axis     | Axis (`string`) | -             | Rotation axis           |\n| value    | number          | -             | Rotation value          |\n\n`axis values`\n\u003e\"RIGHT\" | \"LEFT\" | \"TOP\"\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eInstance Methods\u003c/summary\u003e\n\u003cp\u003e\n\n\u003eAll the instance methods (except `getElement` and `getPattern`) return the same instance, so they are chainable.\n\n```javascript\ngetElement()\n```\n\u003eReturns the native `SVG` path element\n\n```javascript\ngetPattern()\n```\n\u003eReturns the native `SVGPatternElement` responsible for the texture\n\n```javascript\nupdate()\n```\n\u003eForces a re-render of the SVG pentagram\n\n```javascript\nupdateTexture(texture)\n```\n\u003eAdds or override the texture properties\n\n| Property  | Type                 | Optional  | Description                                     |\n| --------- | -------------------- | --------- | ----------------------------------------------- |\n| url       | string               | yes       | URL of the image texture                        |\n| planeView | PlaneView (`string`) | yes       | Texture plane view                              |\n| height    | number               | yes       | Texture height                                  |\n| width     | number               | yes       | Texture width                                   |\n| scale     | number               | yes       | Texture scale                                   |\n| pixelated | boolean              | yes       | Image rendering of the texture                  |\n| shift     | Point (`object`)     | yes       | Shifts the background position                  |\n| rotation  | Rotation (`object`)  | yes       | Rotation of the texture                         |\n\n`shift properties`\n\u003eObject to shift the background position\n\n| Property | Type   | Default value | Description             |\n| -------- | ------ | --------------| ----------------------- |\n| right    | number | -             | Right coordinates       |\n| left     | number | -             | Left coordinates        |\n| top      | number | -             | Top coordinates         |\n\n`rotation properties`\n\u003eObject to set the background rotation\n\n| Property | Type            | Default value | Description             |\n| -------- | --------------- | --------------| ----------------------- |\n| axis     | Axis (`string`) | -             | Rotation axis           |\n| value    | number          | -             | Rotation value          |\n\n`axis values`\n\u003e\"RIGHT\" | \"LEFT\" | \"TOP\"\n\n```javascript\nclear()\n```\n\u003eCleans the isometric pentagram (removes all the path commands from the native SVG path element)\n\n```javascript\naddAnimation(animation)\n```\n\u003eAdds an animated element to the isometric pentagram (not compatible with Internet Explorer). These are the properties of the `SVGPentagramAnimation` object:\n\n| Property        | Type     | Optional  | Default |  Description                                     |\n| --------------- | -------- | --------- | ------- | ------------------------------------------------ |\n| property        | string   | no        | -       | Indicates which property should be animated      |\n| duration        | number   | yes       | 1       | Indicates the number of seconds of the animation |\n| repeat          | number   | yes       | 0       | Number of times that the animation will run. `0` runs indefinitely |\n| from            | string / number | yes | - | Initial value of the animation (if this property is used, `values` property can't be used) |\n| to              | string / number | yes | - | Final value of the animation (if this property is used, `values` property can't be used) |\n| 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) |\n\nThese are the properties that can be animated (property `property`)\n\n* fillColor\n* fillOpacity\n* strokeColor\n* strokeOpacity\n* strokeWidth\n* right\\*\n* left\\*\n* top\\*\n* radius\\*\n* rotation\\*\n\n\u003e\\* 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.\n\n```javascript\nremoveAnimationByIndex(index)\n```\n\u003eRemove an especific animation element by its index.\n\n```javascript\nremoveAnimations()\n```\n\u003eRemove all the animation elements.\n\n```javascript\naddEventListener(type, callback, [useCapture])\n```\n\u003eSets up a function that will be called whenever the specified event is delivered to the isometric pentagram (the SVG path element)\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| type            | string        |\n| callback        | VoidFunction  |\n| callback        | boolean       |\n\n```javascript\nremoveEventListener(type, listener, [useCapture])\n```\n\u003eRemoves from the isometric pentagram (the SVG path element) an event listener previously registered with `addEventListener`\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| type            | string        |\n| callback        | VoidFunction  |\n| callback        | boolean       |\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eInstance Properties\u003c/summary\u003e\n\u003cp\u003e\n\n| Property        | Type               | Description                                                              |\n| --------------- | ------------------ | ------------------------------------------------------------------------ |\n| id              | string             | Gets and sets the id of the isometric pentagram. This property also sets the id of the native `SVG` element |\n| radius          | number             | Gets and sets the radius of the isometric pentagram                      |\n| rotation        | number             | Gets and sets the rotation of the isometric pentagram                    |\n| right           | number             | Gets and sets the right isometric coordinates of the isometric pentagram |\n| left            | number             | Gets and sets the left isometric coordinates of the isometric pentagram  |\n| top             | number             | Gets and sets the top isometric coordinates of the isometric pentagram   |\n| planeView       | string             | Gets and sets the plane view in which the isometric pentagram is created |\n| fillColor       | string             | Gets and sets the fill color of the isometric pentagram                  |\n| fillOpacity     | number             | Gets and sets the fill opacity of the isometric pentagram                |\n| strokeColor     | string             | Gets and sets the stroke color of the isometric pentagram                |\n| strokeOpacity   | number             | Gets and sets the stroke opacity of the isometric pentagram              |\n| strokeDashArray | number[]           | Gets and sets the [SVG stroke dasharray][1] of the isometric pentagram   |\n| strokeLinecap   | string             | Gets and sets the [SVG stroke linecap][2] of the isometric pentagram     |\n| strokeLinejoin  | string             | Gets and sets the [SVG stroke linejoin][3] of the isometric pentagram    |\n| strokeWidth     | number             | Gets and sets the stroke width of the isometric pentagram                |\n| texture         | Texture (`object`) | Gets and sets the texture of the isometric pentagram                     |\n| drag \\*          | PlaneView (`string`) / false | Gets an sets the dragging plane of the isometric pentagram    |\n| bounds          | object / false | Gets and sets the boundaries of the isometric pentagram position             |\n| className       | string             | Gets and sets the CSS class of the isometric pentagram                   |\n\n\u003e\\* 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.\n\n`planeView values`\n\u003e\"TOP\" | \"FRONT\" | \"SIDE\" | false\n\n`bounds properties`\n\u003eObject to set the boundaries of the isometric pentagram position. If it is set as false the isometric pentagram will not have boundaries.\n\n| Property  | Type             | Default value | Description                                             |\n| --------- | ---------------- | ------------- | ------------------------------------------------------- |\n| right     | [number, number] | -             | Minimum and maximum boundaries of the right coordinates |\n| left      | [number, number] | -             | Minimum and maximum boundaries of the left coordinates  |\n| top       | [number, number] | -             | Minimum and maximum boundaries of the top coordinates   |\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n### Class IsometricPath\n\nThis class is to create isometric paths that can be added to the isometric canvas\n\n```javascript\nconst path = new IsometricPath([properties]);\n```\n\n\u003cdetails\u003e\u003csummary\u003eParameters\u003c/summary\u003e\n\u003cp\u003e\n\n`properties` _(optional)_\n\u003eObject to set the properties of the isometric path\n\n| Property        | Type               | Default value  | Description                                              |\n| --------------- | ------------------ | -------------- | -------------------------------------------------------- |\n| id              | string             | random         | Sets the id of the isometric path. It also sets the id of the native SVG element |\n| fillColor       | string             | \"white\"        | Sets the fill color of the isometric path                |\n| fillOpacity     | number             | 1              | Sets the fill opacity of the isometric path              |\n| strokeColor     | string             | \"black\"        | Sets the stroke color of the isometric path              |\n| strokeOpacity   | number             | 1              | Sets stroke opacity of the isometric path                |\n| strokeDashArray | number[]           | []             | Sets the [SVG stroke dasharray][1] of the isometric path |\n| strokeLinecap   | string             | \"butt\"         | Sets the [SVG stroke linecap][2] of the isometric path   |\n| strokeLinejoin  | string             | \"round\"        | Sets the [SVG stroke linejoin][3] of the isometric path  |\n| strokeWidth     | number             | 1              | Sets the stroke width of the isometric path              |\n| texture         | Texture (`object`) | -              | Sets the texture of the isometric path                   |\n| autoclose       | boolean            | true           | Sets if the path should close automatically or not       |\n| className       | string             | -              | Sets the CSS class of the isometric path                 |\n\n`texture properties`\n\u003eObject to set the texture of the isometric path\n\n| Property        | Type                 | Default value  | Description                                                          |\n| --------------- | -------------------- | -------------- | -------------------------------------------------------------------- |\n| url             | string               | -              | URL of the image texture                                             |\n| planeView       | PlaneView (`string`) | -              | Sets the texture plane view                                          |\n| height          | number               | -              | Sets the texture height                                              |\n| width           | number               | -              | Sets the texture width                                               |\n| scale           | number               | -              | Sets the scale of the texture                                        |\n| pixelated       | boolean              | -              | Sets the image rendering of the texture                              |\n| shift           | Point (`object`)     | -              | Shifts the background position                                       |\n| rotation        | Rotation (`object`)  | -              | Set the rotation of the texture                                      |\n\n`shift properties`\n\u003eObject to shift the background position\n\n| Property | Type   | Default value | Description             |\n| -------- | ------ | --------------| ----------------------- |\n| right    | number | -             | Right coordinates       |\n| left     | number | -             | Left coordinates        |\n| top      | number | -             | Top coordinates         |\n\n`rotation properties`\n\u003eObject to set the background rotation\n\n| Property | Type            | Default value | Description             |\n| -------- | --------------- | --------------| ----------------------- |\n| axis     | Axis (`string`) | -             | Rotation axis           |\n| value    | number          | -             | Rotation value          |\n\n`axis values`\n\u003e\"RIGHT\" | \"LEFT\" | \"TOP\"\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eInstance Methods\u003c/summary\u003e\n\u003cp\u003e\n\n\u003eAll the instance methods (except `getElement` and `getPattern`) return the same instance, so they are chainable.\n\n```javascript\ngetElement()\n```\n\u003eReturns the native `SVG` path element\n\n```javascript\ngetPattern()\n```\n\u003eReturns the native `SVGPatternElement` responsible for the texture\n\n```javascript\nupdate()\n```\n\u003eForces a re-render of the SVG path\n\n```javascript\nupdateTexture(texture)\n```\n\u003eAdds or override the texture properties\n\n| Property  | Type                 | Optional  | Description                                     |\n| --------- | -------------------- | --------- | ----------------------------------------------- |\n| url       | string               | yes       | URL of the image texture                        |\n| planeView | PlaneView (`string`) | yes       | Texture plane view                              |\n| height    | number               | yes       | Texture height                                  |\n| width     | number               | yes       | Texture width                                   |\n| scale     | number               | yes       | Texture scale                                   |\n| pixelated | boolean              | yes       | Image rendering of the texture                  |\n| shift     | Point (`object`)     | yes       | Shifts the background position                  |\n| rotation  | Rotation (`object`)  | yes       | Rotation of the texture                         |\n\n`shift properties`\n\u003eObject to shift the background position\n\n| Property | Type   | Default value | Description             |\n| -------- | ------ | --------------| ----------------------- |\n| right    | number | -             | Right coordinates       |\n| left     | number | -             | Left coordinates        |\n| top      | number | -             | Top coordinates         |\n\n`rotation properties`\n\u003eObject to set the background rotation\n\n| Property | Type            | Default value | Description             |\n| -------- | --------------- | --------------| ----------------------- |\n| axis     | Axis (`string`) | -             | Rotation axis           |\n| value    | number          | -             | Rotation value          |\n\n`axis values`\n\u003e\"RIGHT\" | \"LEFT\" | \"TOP\"\n\n```javascript\nmoveTo(right, left, top)\n```\n\u003eMove the cursor to an isometric point, if the cursor was already in another point, no line is drawn between them.\n\n| Parameter       | Type       | Description                              |\n| --------------- | ---------- | ---------------------------------------- |\n| right           | number     | Right value in the isometric coordinates |\n| left            | number     | Left value in the isometric coordinates  |\n| top             | number     | Top value in the isometric coordinates   |\n    \n```javascript\nlineTo(right, left, top)\n```\n\u003eDraws a line from the previous isometric point to the destination point.\n\n| Parameter       | Type       | Description                                                       |\n| --------------- | ---------- | ----------------------------------------------------------------- |\n| right           | number     | Right value in the isometric coordinates of the destination point |\n| left            | number     | Left value in the isometric coordinates of the destination point  |\n| top             | number     | Top value in the isometric coordinates of the destination point   |\n\n```javascript\ncurveTo(controlRight, controlLeft, controlTop, right, left, top)\n```\n\u003eDraws a curve from the previous isometric point to the designated isometric point crossing the control isometric point.\n\n| Parameter       | Type       | Description                                                       |\n| --------------- | ---------- | ----------------------------------------------------------------- |\n| controlRight    | number     | Right value in the isometric coordinates of the control point     |\n| controlLeft     | number     | Left value in the isometric coordinates of the control point      |\n| controlTop      | number     | Top value in the isometric coordinates of the control point       |\n| right           | number     | Right value in the isometric coordinates of the destination point |\n| left            | number     | Left value in the isometric coordinates of the destination point  |\n| top             | number     | Top value in the isometric coordinates of the destination point   |\n    \n```javascript\nmt(right, left, top)\n```\n\u003eAlias of `moveTo`.\n\n```javascript\nlt(right, left, top)\n```\n\u003eAlias of `lineTo`.\n\n```javascript\nct(controlRight, controlLeft, controlTop, right, left, top)\n```\n\u003eAlias of `curveTo`.\n\n```javascript\ndraw(commands)\n```\n\u003eDraws a line taking into account a series of drawing commands.\n\n| Parameter       | Type       | Description                              |\n| --------------- | ---------- | ---------------------------------------- |\n| 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)` |\n\n```javascript\nclear()\n```\n\u003eCleans the isometric path (removes all the path commands from the native SVG path element)\n\n```javascript\naddAnimation(animation)\n```\n\u003eAdds an animated element to the isometric path (not compatible with Internet Explorer). These are the properties of the `SVGPathAnimation` object:\n\n| Property        | Type     | Optional  | Default |  Description                                     |\n| --------------- | -------- | --------- | ------- | ------------------------------------------------ |\n| property        | string   | no        | -       | Indicates which property should be animated      |\n| duration        | number   | yes       | 1       | Indicates the number of seconds of the animation |\n| repeat          | number   | yes       | 0       | Number of times that the animation will run. `0` runs indefinitely |\n| from            | string / number | yes | - | Initial value of the animation (if this property is used, `values` property can't be used) |\n| to              | string / number | yes | - | Final value of the animation (if this property is used, `values` property can't be used) |\n| 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) |\n\nThese are the properties that can be animated (property `property`)\n\n* fillColor\n* fillOpacity\n* strokeColor\n* strokeOpacity\n* strokeWidth\n* path\n\n```javascript\nremoveAnimationByIndex(index)\n```\n\u003eRemove an especific animation element by its index.\n\n```javascript\nremoveAnimations()\n```\n\u003eRemove all the animation elements.\n\n```javascript\naddEventListener(type, callback, [useCapture])\n```\n\u003eSets up a function that will be called whenever the specified event is delivered to the isometric path (the SVG path element)\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| type            | string        |\n| callback        | VoidFunction  |\n| callback        | boolean       |\n\n```javascript\nremoveEventListener(type, listener, [useCapture])\n```\n\u003eRemoves from the isometric path (the SVG path element) an event listener previously registered with `addEventListener`\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| type            | string        |\n| callback        | VoidFunction  |\n| callback        | boolean       |\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eInstance Properties\u003c/summary\u003e\n\u003cp\u003e\n\n| Property        | Type               | Description                                                       |\n| --------------- | ------------------ | ----------------------------------------------------------------- |\n| id              | string             | Gets and sets the id of the isometric path. This property also sets the id of the native `SVG` element |\n| fillColor       | string             | Gets and sets the fill color of the isometric path                |\n| fillOpacity     | number             | Gets and sets the fill opacity of the isometric path              |\n| strokeColor     | string             | Gets and sets the stroke color of the isometric path              |\n| strokeOpacity   | number             | Gets and sets the stroke opacity of the isometric path            |\n| strokeDashArray | number[]           | Gets and sets the [SVG stroke dasharray][1] of the isometric path |\n| strokeLinecap   | string             | Gets and sets the [SVG stroke linecap][2] of the isometric path   |\n| strokeLinejoin  | string             | Gets and sets the [SVG stroke linejoin][3] of the isometric path  |\n| strokeWidth     | number             | Gets and sets the stroke width of the isometric path              |\n| texture         | Texture (`object`) | Gets and sets the texture of the isometric path                   |\n| autoclose       | boolean            | Gets and sets the autoclose property of the isometric path        |\n| className       | string             | Gets and sets the CSS class of the isometric path                 |\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n### Class IsometricText\n\nThis class is to create isometric texts that can be added to the isometric canvas.\n\n```javascript\nconst path = new IsometricText(properties);\n```\n\n\u003cdetails\u003e\u003csummary\u003eParameters\u003c/summary\u003e\n\u003cp\u003e\n\n`properties`\n\u003eObject to set the properties of the isometric text\n\n| Property        | Type                 | Default value        | Description                                                       |\n| --------------- | -------------------- | -------------------- | ----------------------------------------------------------------- |\n| id              | string               | random               | Sets the id of the isometric text. It also sets the id of the native SVG group element |\n| planeView       | PlaneView (`string`) | -                    | Sets the plane view in which the isometric text will be created   |\n| text            | string               | ''                   | Sets the text content of the isometric text                       |\n| right           | number               | 0                    | Sets the right isometric coordinates of the isometric text        |\n| left            | number               | 0                    | Sets the left isometric coordinates of the isometric text         |\n| top             | number               | 0                    | Sets the top isometric coordinates of the isometric text          |\n| fontFamily      | string               | 'Arial'              | Sets the font-family of the isometric text                        |\n| fontSize        | string               | 12                   | Sets the font-size of the isometric text                          |\n| fontStyle       | string literal       | 'normal              | Sets the font-style of the isometric text                         |\n| fontWeight      | number | string literal | 'normal'          | Sets the font-weight of the isometric text                        |\n| rotation        | number               | 0                    | Sets the rotation of the isometric text                           |\n| origin          | string literal tuple | ['center', 'center'] | Sets the origin of the isometric text position and transformations| \n| selectable      | boolean              | true                 | Indicates if the isometric text should be selectable or not       | \n| fillColor       | string               | \"white\"              | Sets the fill color of the isometric text                         |\n| fillOpacity     | number               | 1                    | Sets the fill opacity of the isometric text                       |\n| strokeColor     | string               | \"black\"              | Sets the stroke color of the isometric text                       |\n| strokeOpacity   | number               | 1                    | Sets stroke opacity of the isometric text                         |\n| strokeDashArray | number[]             | []                   | Sets the [SVG stroke dasharray][1] of the isometric text          |\n| strokeLinecap   | string               | \"butt\"               | Sets the [SVG stroke linecap][2] of the isometric text            |\n| strokeLinejoin  | string               | \"round\"              | Sets the [SVG stroke linejoin][3] of the isometric text           |\n| strokeWidth     | number               | 1                    | Sets the stroke width of the isometric text                       |\n| texture         | Texture (`object`)   | -                    | Sets the texture of the isometric text                            |\n| className       | string               | -                    | Sets the CSS class of the isometric text                          |\n\n`planeView values`\n\u003e\"TOP\" | \"FRONT\" | \"SIDE\"\n\n`fontStyle values`\n\u003e\"normal\" | \"italic\" | \"oblique\"\n\n`fontWeight values`\n\u003enumber | \"normal\" | \"bold\" | \"bolder\" | \"lighter\"\n\n`origin values`\n\u003e[\"left\" | \"center\" | \"right\", \"top\" | \"center\", \"bottom\"]\n\n`texture properties`\n\u003eObject to set the texture of the isometric text\n\n| Property        | Type                 | Default value    | Description                                                          |\n| --------------- | -------------------- | ---------------- | -------------------------------------------------------------------- |\n| url             | string               | -                | URL of the image texture                                             |\n| planeView       | PlaneView (`string`) | parent planeView | Sets the texture plane view. By default it takes the isometric text plane view |\n| height          | number               | -                | Sets the texture height                                              |\n| width           | number               | -                | Sets the texture width                                               |\n| scale           | number               | -                | Sets the scale of the texture                                        |\n| pixelated       | boolean              | -                | Sets the image rendering of the texture                              |\n| shift           | Point (`object`)     | -                | Shifts the background position                                       |\n| rotation        | Rotation (`object`)  | -                | Set the rotation of the texture                                      |\n\n`shift properties`\n\u003eObject to shift the background position\n\n| Property | Type   | Default value | Description             |\n| -------- | ------ | --------------| ----------------------- |\n| right    | number | -             | Right coordinates       |\n| left     | number | -             | Left coordinates        |\n| top      | number | -             | Top coordinates         |\n\n`rotation properties`\n\u003eObject to set the background rotation\n\n| Property | Type            | Default value | Description             |\n| -------- | --------------- | --------------| ----------------------- |\n| axis     | Axis (`string`) | -             | Rotation axis           |\n| value    | number          | -             | Rotation value          |\n\n`axis values`\n\u003e\"RIGHT\" | \"LEFT\" | \"TOP\"\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eInstance Methods\u003c/summary\u003e\n\u003cp\u003e\n\n\u003eAll the instance methods (except `getElement` and `getPattern`) return the same instance, so they are chainable.\n\n```javascript\ngetElement()\n```\n\u003eReturns the native `SVG` `g` element\\*\n\n\u003e\\* 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.\n\n```javascript\ngetPattern()\n```\n\u003eReturns the native `SVGPatternElement` responsible for the texture\n\n```javascript\nupdate()\n```\n\u003eForces a re-render of the SVG text\n\n```javascript\nupdateTexture(texture)\n```\n\u003eAdds or override the texture properties\n\n| Property  | Type                 | Optional  | Description                                     |\n| --------- | -------------------- | --------- | ----------------------------------------------- |\n| url       | string               | yes       | URL of the image texture                        |\n| planeView | PlaneView (`string`) | yes       | Texture plane view                              |\n| height    | number               | yes       | Texture height                                  |\n| width     | number               | yes       | Texture width                                   |\n| scale     | number               | yes       | Texture scale                                   |\n| pixelated | boolean              | yes       | Image rendering of the texture                  |\n| shift     | Point (`object`)     | yes       | Shifts the background position                  |\n| rotation  | Rotation (`object`)  | yes       | Rotation of the texture                         |\n\n`shift properties`\n\u003eObject to shift the background position\n\n| Property | Type   | Default value | Description             |\n| -------- | ------ | --------------| ----------------------- |\n| right    | number | -             | Right coordinates       |\n| left     | number | -             | Left coordinates        |\n| top      | number | -             | Top coordinates         |\n\n`rotation properties`\n\u003eObject to set the background rotation\n\n| Property | Type            | Default value | Description             |\n| -------- | --------------- | --------------| ----------------------- |\n| axis     | Axis (`string`) | -             | Rotation axis           |\n| value    | number          | -             | Rotation value          |\n\n`axis values`\n\u003e\"RIGHT\" | \"LEFT\" | \"TOP\"\n\n```javascript\nclear()\n```\n\u003eCleans the isometric text (set an empty string in the native SVG text element)\n\n```javascript\naddAnimation(animation)\n```\n\u003eAdds an animated tranform element to the isometric text (not compatible with Internet Explorer). These are the properties of the `SVGTextAnimation` object:\n\n| Property        | Type     | Optional  | Default |  Description                                     |\n| --------------- | -------- | --------- | ------- | ------------------------------------------------ |\n| property        | string   | no        | -       | Indicates which property should be animated      |\n| duration        | number   | yes       | 1       | Indicates the number of seconds of the animation |\n| repeat          | number   | yes       | 0       | Number of times that the animation will run. `0` runs indefinitely |\n| from            | string / number | yes | - | Initial value of the animation (if this property is used, `values` property can't be used) |\n| to              | string / number | yes | - | Final value of the animation (if this property is used, `values` property can't be used) |\n| 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) |\n\nThese are the properties that can be animated (property `property`)\n\n* fillColor\n* fillOpacity\n* strokeColor\n* strokeOpacity\n* strokeWidth\n* right\n* left\n* top\n* rotation\n\n```javascript\nremoveAnimationByIndex(index)\n```\n\u003eRemove an especific animation element by its index.\n\n```javascript\nremoveAnimations()\n```\n\u003eRemove all the animation elements.\n\n```javascript\naddEventListener(type, callback, [useCapture])\n```\n\u003eSets up a function that will be called whenever the specified event is delivered to the isometric text (the SVG text element)\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| type            | string        |\n| callback        | VoidFunction  |\n| callback        | boolean       |\n\n```javascript\nremoveEventListener(type, listener, [useCapture])\n```\n\u003eRemoves from the isometric text (the SVG text element) an event listener previously registered with `addEventListener`\n\n| Parameter       | Type          |\n| --------------- | ------------- |\n| type            | string        |\n| callback        | VoidFunction  |\n| callback        | boolean       |\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eInstance Properties\u003c/summary\u003e\n\u003cp\u003e\n\n| Property        | Type               | Description                                                           |\n| --------------- | ------------------ | --------------------------------------------------------------------- |\n| id              | string             | Gets and sets the id of the isometric text. This property also sets the id of the native `SVG` element |\n| planeView       | string             | Gets and sets the plane view in which the isometric text is created   |\n| right           | number             | Gets and sets the right isometric coordinates of the isometric text   |\n| left            | number             | Gets and sets the left isometric coordinates of the isometric text    |\n| top             | number             | Gets and sets the top isometric coordinates of the isometric text     |\n| fontFamily      | string             | Gets and sets the font-family of the isometric text                   |\n| fontSize        | string             | Gets and sets the font-size of the isometric text                     |\n| fontStyle       | string literal     | Gets and sets the font-style of the isometric text                    |\n| fontWeight      | number | string literal | Gets and sets the font-weight of the isometric text              |\n| rotation        | number             | Gets and sets the rotation of the isometric text                      |\n| origin          | string literal tuple | Gets and sets the origin of the isometric text position and transformations| \n| selectable      | boolean            | Gets and sets the ability of the isometric text of being selectable   | \n| fillColor       | string             | Gets and sets the fill color of the isometric text                    |\n| fillOpacity     | number             | Gets and sets the fill opacity of the isometric text                  |\n| strokeColor     | string             | Gets and sets the stroke color of the isometric text                  |\n| strokeOpacity   | number             | Gets and sets the stroke opacity of the isometric text                |\n| strokeDashArray | number[]           | Gets and sets the [SVG stroke dasharray][1] of the isometric text     |\n| strokeLinecap   | string             | Gets and sets the [SVG stroke linecap][2] of the isometric text       |\n| strokeLinejoin  | string             | Gets and sets the [SVG stroke linejoin][3] of the isometric text      |\n| strokeWidth     | number             | Gets and sets the stroke width of the isometric text                  |\n| texture         | Texture (`object`) | Gets and sets the texture of the isometric text                       |\n| className       | string             | Gets and sets the CSS class of the isometric text                     |\n\n`planeView values`\n\u003e\"TOP\" | \"FRONT\" | \"SIDE\"\n\n`fontStyle values`\n\u003e\"normal\" | \"italic\" | \"oblique\"\n\n`fontWeight values`\n\u003enumber | \"normal\" | \"bold\" | \"bolder\" | \"lighter\"\n\n`origin values`\n\u003e[\"left\" | \"center\" | \"right\", \"top\" | \"center\", \"bottom\"]\n\n`texture properties`\n\u003eObject to set the texture of the isometric text\n\n| Property        | Type                 | Default value    | Description                                                          |\n| --------------- | -------------------- | ---------------- | -------------------------------------------------------------------- |\n| url             | string               | -                | URL of the image texture                                             |\n| planeView       | PlaneView (`string`) | parent planeView | Sets the texture plane view. By default it takes the isometric text plane view |\n| height          | number               | -                | Sets the texture height                                              |\n| width           | number               | -                | Sets the texture width                                               |\n| scale           | number               | -                | Sets the scale of the texture                                        |\n| pixelated       | boolean              | -                | Sets the image rendering of the texture                              |\n| shift           | Point (`object`)     | -                | Shifts the background position                                       |\n| rotation        | Rotation (`object`)  | -                | Set the rotation of the texture                                      |\n\n`shift properties`\n\u003eObject to shift the background position\n\n| Property | Type   | Default value | Description             |\n| -------- | ------ | --------------| ----------------------- |\n| right    | number | -             | Right coordinates       |\n| left     | number | -             | Left coordinates        |\n| top      | number | -             | Top coordinates         |\n\n`rotation properties`\n\u003eObject to set the background rotation\n\n| Property | Type            | Default value | Description             |\n| -------- | --------------- | --------------| ----------------------- |\n| axis     | Axis (`string`) | -             | Rotation axis           |\n| value    | number          | -             | Rotation value          |\n\n`axis values`\n\u003e\"RIGHT\" | \"LEFT\" | \"TOP\"\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n[1]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\n[2]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap\n[3]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin\n[4]: https://elchininet.github.io/isometric/#demo3","funding_links":["https://github.com/sponsors/elchininet"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felchininet%2Fisometric","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felchininet%2Fisometric","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felchininet%2Fisometric/lists"}