# svg-attachment

> utilities of svg

Latest version **1.2.0** (published 2017-11-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install svg-attachment
pnpm add svg-attachment
yarn add svg-attachment
bun add svg-attachment
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2017-11-19 |
| First published | 2017-11-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | henoc |
| Maintainers | henoc |

## Links

- npm: https://www.npmjs.com/package/svg-attachment
- Repository: https://github.com/Henoc/svg-attachment
- Homepage: https://github.com/Henoc/svg-attachment#readme
- Issues: https://github.com/Henoc/svg-attachment/issues
- npm.io page: https://npm.io/package/svg-attachment

## Dependencies (2)

- [yaparsec](https://npm.io/package/yaparsec.md) ^1.1.0
- [tinycolor2](https://npm.io/package/tinycolor2.md) ^1.4.1

## Recent versions

- 1.2.0 (latest) — 2017-11-19
- 1.1.0 — 2017-11-18
- 1.0.2 — 2017-11-18
- 1.0.1 — 2017-11-18
- 1.0.0 — 2017-11-18
- 0.3.0 — 2017-11-18
- 0.2.0 — 2017-11-18
- 0.1.0 — 2017-11-18
- 0.0.1 — 2017-11-17

## 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.

---
_Source: https://npm.io/package/svg-attachment · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._