SavageDOM -
SavageDOM is a lightweight module to create and manipulate SVG elements.
Getting Started
Installation
- A direct download of the minified output is available in the dist directory
- Available via the
jsdelivr
cdn
- Available via the
npm i -P savagedom
to support bundlers
Usage
Automatically-generated documentation is available here.
This module functions as a utility wrapper on top of the existing DOM element definitons. All augmentations are manually applied by this module so no prototype manipulation happens.
element
Default Export -
element(svgElement, props?)
- Wraps an
SVGElement
and returns the correspondingSavageDOMElement
- An optional property object can also be specified, which will be applied to the new element
- Wraps an
-
element.<tagName>(props?)
- Invoking any method on
element
will construct a newSavageDOMElement
with thattagName
- An optional property object can also be specified, which will be applied to the new element
- Invoking any method on
SavageDOMElement
wrapper
The SavageDOMElement
type is an additive wrapper, so any method that requires an SVGElement
will accept a SavageDOMElement
instead.
-
SavageDOMElement.get(key)
- Fully-typed attribute access
- Combines both native SVG attributes as well as available CSS style attributes
- Returns deserialized value (depends on attribute)
-
SavageDOMElement.set(key, value)
/SavageDOMElement.set(props)
- Fully-typed attribute access
- Combines both native SVG attributes as well as available CSS style attributes
- Default serialization assumes
value
can be coerced tostring
- Supports single
key
,value
args orprops
object of multiple keys/values - Additional processing exists for
<funciri>
andlist-of
types
-
SavageDOMElement.animateTo(timing, key, value)
/SavageDOMElement.animateTo(timing, props)
- Fully-typed attribute access
- Combines both native SVG attributes as well as available CSS style attributes
- Default serialization assumes
value
can be coerced tostring
- Supports single
key
,value
args orprops
object of multiple keys/values - Only supports interpolation for:
boolean
,number
,angle
,length
, andcolor
as well as list ofnumber
,length
,point
, andtransform
-
SavageDOMElement.once(event)
- Utility wrapper around one time event listener
-
SavageDOMElement.add(svgElement, prefix?)
- Adds any SVGElement beneath this element
- Optional argument to prepend instead of append (default)
-
SavageDOMElement.add.<tagName>(props?)
- Identical to
element.<tagName>(props?)
for constructing new elements - All element created this way will be appended to current element
- Identical to
-
SavageDOMElement.rm(svgElement)
- Utility wrapper around
Node.removeChild
- Utility wrapper around
-
SavageDOMElement.inject(document)
- Inserts a copy of a
Document
into the current element Document
must be an SVG document with a top-level<svg>
tag- This method will modify the input
Document
by migrating alldefs
to the parent<svg>
of this element - All contents will be added inside of a
<g>
element - The same
Document
can be injected more than once independently
- Inserts a copy of a
-
SavageDOMElement.sub
- A live
ArrayLike
object that contains all sub-elements of this element - Accessing any sub-elements will return them as a wrapped
SavageDOMElement
- A live
-
SavageDOMElement.subByTag.<tagName>
- A live
ArrayLike
object that contains all sub-elements with the correspondingtagName
under this element - Accessing any sub-elements will return them as a wrapped
SavageDOMElement
- A live