Important note: this is beta software, and the API is subject to change without warning. We will try to maintain semantic versioning when function calls change, so your code should remain functional, but the library itself is expected to rapidly evolve as we improve it. This code is written in ES2015, and you may need Babel or another transpiler to run it in your browser.
Savage Query is a jQuery-like abstraction layer for SVG DOM. It papers over the unfortunate old-school cracks in the API, such as native values for attributes like
className. You can use Query mostly the same way you would use jQuery, but the resulting collection object has different methods attached. Unless otherwise noted, all functions are applied to all elements in the collection.
fnon every element in the collection.
find(selector)- Search through the collection for child elements that match the selector.
get(index = 0)- Retrieve the element at
addClass(c)- Add a class to elements. Runs naively--you may end up with duplicates in the className attribute.
removeClass(c)- Remove class from elements.
toArray()- Return the entire element list as an array.
draw()- Animates the stroke of selected elements by transitioning the
stroke-dashoffsetstyle. Uses CSS transitions, so will not work in IE.
fade()- Fades selected elements into visibility by transitioning the
opacitystyle. Does work in IE.
on(event, fn)- Adds an event listener to selected elements.
style(name, value)- Works like jQuery's
The Savage constructor also contains the following static methods, which can be invoked without creating an actual Savage instance:
dom(tagName, [attributes], [children])- Similar to the Mithril element creation function, this lets you build an SVG DOM tree easily.
attributesshould be an object mapping attribute names to values.
childrencan be either an array of child elements (ideally also constructed using
Savage.dom()) or a string (which will be used as the text content).
Other utilities in the Savage family include:
- Savage Camera - a simple viewBox camera system