Wrapper

Attributes

In Graphane SVG API, the attributes are handled as methods. The call to one of these methods with parameter value, sets the attribute and returns the object for chained calls. The call without parameter returns the value of the attribute.

Where the attribute has a hyphenated name (-), this is replaced by the underscore (_). The rest of the name stays the same.

attribute name	Graphane method
x	.x()
viewBox	.viewBox()
stroke-width	.stroke_width()

const circle = $.svg.add('circle').cx(10).cy(10).r(5).stroke('red').stroke_width(1);
const radius = circle.r();

Properties

In Graphane SVG API, the properties are handled as methods with the original name. The call to one of these methods with parameters sets the property and returns the object for chained calls. The call without parameter returns the value of the property.

property name	Graphane method
.tagName	.tagName()
.nextElementSibling	.nextElementSibling()
.attributes	.attributes()

const circle = $.svg.add('circle').cx(10).cy(10).r(5);
console.log(circle.tagName());

Methods

In Graphane SVG API, the native methods are handled without changes in its behavior and parameters. These methods return the same values as the original method, except when:

• the original return is undefined, the wrapped element is returned.
• the return is an SVG element or an array of SVG elements, those elements are converted into a Graphane SVG wrapped object.

method name	Graphane method
.getScreenCTM()	.getScreenCTM()
.addEventListener()	.addEventListener()
.querySelector()	.querySelector()

ssvg.add('circle').cx(3).cy(3).r(1);
svg.add('circle').cx(6).cy(6).r(1);
svg.add('circle').cx(9).cy(9).r(1);
const circles = $.svg.querySelectorAll('circle'); // return an array with Graphane SVG objects