# Quick reference

# Import

import gySVG from 'https://cdn.graphery.online/svg/0.1.4/module/index.js';

# Manage elements

# gySVG()

const mySVG = gySVG();

gySVG() creates a new SVG element and returns its gySVG wrapper object.

# gySVG(element)

<svg id="mySvg"></svg>
const el    = document.querySelector('#mySvg');
const mySVG = gySVG(el);

gySVG( element ) returns a gySVG wrapper object over an existing SVG element.

# gySVG(tag_name)

const mySVG  = gySVG();
const myRect = gySVG('rect');
myRect.attachTo(mySVG);

gySVG( tag_name ) create a new SVG element and returns its wrapper object. This element must be attached into an SVG element with .attachTo().

# element.add(tag_name)

const rect = parentElement.add('rect');

.add( tag_name ) creates and attach a nested SVG element and returns its gySVG wrapper object.

# element.attachTo(selector|element)

<div id="content"></div>
const mySvg = gySVG();
mySvg.attachTo('#content');

element.attach(selector|element) add the SVG element into the DOM. This method receive as parameter a string with a selector or a DOM element and put the SVG element into this.

# element.remove()

element.remove();

.remove() deattach the object from the parent element.

# element.cloneNode([true])

const svg = gySVG();
const circle1 = svg.add('circle');
const circle2 = circle1.cloneNode().attachTo(svg);

.cloneNode() create an element copy. If the parameter is true, the copy is in deep and other child elements are copied too. A clone node must be attached to an element with .attachTo().

# element.children()

for (let el of element.children()) {
  //...
}

.children() returns an array with all nested elements.

# element.parent()

const g = line.parent();

.parent() returns the parent object or null if not exist.

# element.querySelector() and element.querySelectorAll()

const lines = svg.querySelectorAll('line');

You can get any nested element with .querySelector() or .querySelectorAll() with a CSS selector as parameter.

# Manage attributes

All gySVG wrapper object has a group of methods to get and set attributes very quickly.

# element.attribute_name()

const mySvg = gySVG().viewBox('0 0 100 100').width('100px');

if (mySvg.width() === '100px') {
  mySvg.height('100px')
}

To get an attribute value is very simple. You must use the attribute name as a method, and the value is returned.

# element.attribute_name(value)

const mySvg = gySVG().viewBox('0 0 100 100').width('100px').height('100px');
mySvg.add('rect').x(10).x(20).width(10).height(20).fill('#F60');

To set an attribute you must use the wrapper with the attribute name, which now refers to a method. This function receives the new value and returns the wrapper object, and as a result, you can nest the calls.

WARNING

If you call to an unknown or wrong attribute name, an attribute with that name is created.

# Attribute names

SVG element attributes are converted to methods by replacing hyphen (-) with underscore (_). The rest of the name stays the same. Here are some examples:

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

# Complementary methods

# element.id()

It returns the current unique identification.

# element.href()

It returns the unique identification as a #id

# element.url()

It returns the unique identification as a url(id)

# Manage properties

# element.property_name()

const svg = gySVG().viewBox('0 0 100 100');
console.log(svg.hidden());

If you need get a property (non an attribute) you can use the property name for getting a function which return the property value.

# wrapper.property_name(value)

const svg = gySVG().viewBox('0 0 100 100');
svg.hiden(true);

Update a property is very simple, only you need to call the property function with the new value as parameter. This function return the wrapper object, as a result, you can nest the calls too.

const svg = SVG()
  .viewBox('0 0 100 100')
  .hidden(true)
  .width('100px')
  .height('100px');

# Property names

The properties of the SVG elements are converted to gySVG in methods keeping the same original name.

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

# Access to property object

Some properties such as "style" or "classList" are objects. In these cases you can access to deep properties as methods.

.classList object kept the original methods:

method name gySVG method
.classList.add() .classList.add()
.classList.remove() .classList.remove()
.classList.contains() .classList.contains()
const svg = SVG().viewBox('0 0 100 100');
svg.classList.add('test')

style is a very special case because is an attribute and a deep object with properties. In this case you can use .style() to access as attribute and .style. to access its child properties.

The properties of the .style object are wrapped and its properties are now methods with the same name as the original property name:

style name gySVG method
.style.fontSize .style.fontSize()
.style.color .style.color()
.style.fill .style.fill()
const svg = SVG().viewBox('0 0 100 100').style('stroke: #000');
svg.style.strokeWidth('10px');

Note

Many SVG attributes are visuals and can also be used as properties CSS, so in gySVG you can choose to use .stroke_width() or .style.strokeWidth().

# Manage methods

SVG element methods are converted directly into gySVG methods without changes in its behavior, parameters, or return.

method name gySVG method
.getScreenCTM() .getScreenCTM()
.addEventListener() .addEventListener()
.cloneNode() .cloneNode()

These methods receive the same parameters and return the same values as the original method except:

  • if the return is undefined, the wrapped element is returned.
  • if the return is an SVG element or an array of SVG elements, those elements are converted into a gySVG wrapped object.
const circles = element.querySelectorAll('circle'); // return an array with gySVG wapped objects

# Simple animation

# element.animateTo(properties[, duration])

We recommend using CSS animations or SMIL animations. In some cases, these animations are not possible or have limitations. For those cases, the method .animateTo() which progressively modifies attributes from the original values to destination values within the set time.

  • properties: is an object with the attributes or properties names as keys and target value as values.

  • duration: is a number than defines, in milliseconds, the animation's time. The default value is 200 (fast animation).

const svg = SVG().viewBox('0 0 100 100');
svg.add ('circle').cx (10).cy (10).r (0)
  .animateTo({r: 10});
svg.add ('circle').cx (30).cy (10).r (10)
  .animateTo({r: 0});

# Content and source

# element.content()

const svg = gySVG().viewBox('0 0 100 100');
svg.add('circle').r(10).cx(50).cy(50);
console.log(svg.content());

If you need to get the SVG element content as a text, you can use the method .content() without parameters. This method return the current inner SVG elements.

# element.content(source)

const svg = gySVG().viewBox('0 0 100 100');
svg.content(`<circle r="10" cx="50" cy="50"></circle>`);

If you need to put the SVG element content from a text, you can use the method .content(source). This method return the current gySVG wrapper and put the text as inner source.

# element.source()

const svg = gySVG().viewBox('0 0 100 100');
svg.add('circle').r(10).cx(50).cy(50);
console.log(svg.source());

If you need to get the element source, included the element, you can use .source(). This method return the source element as a text.

# Original SVG object

# element.el

const svg = gySVG().viewBox('0 0 100 100');
document.querySelector('#container').appendChild(svg.el);

In some cases you need the original element wrapped by gySVG() or .add(). In these cases you can get the original element wrapped with the attribute .el.

# Is a gySVG wrapper?

# gySVG.isWrapped(object)

const svg = gySVG();
console.log( gySVG.isWrapped( svg ) );    // true
console.log( gySVG.isWrapped( svg.el ) ); // false

If you have an object, and you need to check if is a wrapper, use SVG.isWrapped().