svg-attachment

SVG Attachment

Tiny utility functions of SVG DOM.

Features

• Simple, easy.
• No dirty DOM. No append some extra attributes.

Usage

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.