https://github.com/henoc/svg-attachment

Utilities of SVG DOM
https://github.com/henoc/svg-attachment

Last synced: about 1 month ago
JSON representation

Utilities of SVG DOM

• Host: GitHub
• URL: https://github.com/henoc/svg-attachment
• Owner: henoc
• Created: 2017-11-17T16:36:34.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-20T02:43:01.000Z (about 7 years ago)
• Last Synced: 2024-04-24T20:03:15.684Z (9 months ago)
• Language: JavaScript
• Size: 180 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# SVG Attachment

![attachment image here](https://github.com/Henoc/svg-attachment/blob/master/images/attachment.png)

Tiny utility functions of SVG DOM.

## Features

- Simple, easy.

- No dirty DOM. No append some extra attributes.

## Usage

typescript:

```typescript

import {svg} from "svg-attachment";

let root = svg(document.getElementById("svg")!);    // svg tag element

let circle = document.getElementById("circle");

console.log(JSON.stringify(

  root.svgof(circle).leftTop()     // print the position of circle

));

```

Full js file is `dest/svg-attachment.js`

## Contents

`svg` function makes a `RootManager` instance. `RootManager` has some methods that derives more managers.

### Functions of SvgManager

Below functions are methods derived by `svgof(node: SVGElement)`. Many functions are getter and also setter.

|name, args|return|description|

|:---|:---|:---|

|attr(name: string, value?: string)|string \| undefined| Get or set attributes |

|attrFn(name: string, fn: (v: string \| undefined) => string)|string \| undefined| Attributes setter which can use current value |

|getBBox()|ClientRect|Get bounding box|

|leftTop(vec2?: Vec2)|Vec2| Get or set left top position of shape|

|rightBottom(vec2?: Vec2)|Vec2| |

|center(vec2?: Vec2)|Vec2| |

|size(vec2?: Vec2)|Vec2| Get or set width and height, introduced by BoundingClientRect method. |

|zoom(ratio: Vec2)|void| Zoom the shape without transform attributes. If only raito fixed zoom is accepted, value of `ratio[0]` is applied. |

|color(fillstroke: "fill" \| "stroke", colorInstance?: tinycolorInstance) |tinycolorInstance \| undefined| Get or set color of fill/stroke with opacity. In getter, source function is `getComputedStyle`. Return undefined if there is `none` color. |

|style(name: string, value?: string)|string \| undefined| Get computed style (undefined if value is undefined or "none") or set value to the style attribute |

|transform(transformfns?: TransformFn[])|TransformFn[] \| undefined| Get or set transform attribute |

|matrix(affine?: Affine)|Affine| Get or set as one matrix function |

|select(query: string)|Element[]| Return all matched elements that is a descendant of this element |

### Functions of CollectionManager

Below functions are methods derived by `collectionof(node: SVGElement[])`. It's to enable united processes for SVGElement set.

|name, args|return|description|

|:--|:--|:--|

|center(vec2?: Vec2)|Vec2| |

|zoom(ratio: Vec2)|void| |

|size(vec2?: Vec2)|Vec2| |

|getBox()|Box| Returns an object represents merged ClientRect |

### Types

- `Vec2 = [number, number]`

- `TransformFn = { kind: TransformKinds; args: number[]; }`

- `TransformKinds = "matrix" | "translate" | "scale" | "rotate" | "skewX" | "skewY"`

- `Box = { leftTop: Vec2; rightBottom: Vec2; }`

- `tinycolorInstance` is the instance by package tinycolor2.