# Manage elements

# gySVG()

Creates a new SVG element and returns its Graphery SVG wrapper object for manipulation.

argument: nothing
return: { object } SVGWrapper an Graphery SVG wrapper object.

const mySVG = gySVG();

# gySVG(object)

Creates a wrapped object from an existing SVG DOM object.

argument: {object} SVGElement an SVG element object.
return: {object} wrapper SVG wrapper object.

<svg id="mySvg"></svg>

const el    = document.querySelector('#mySvg');
const mySVG = gySVG(el);

# gySVG(tagName)

Create a new SVG element, i.e., a 'svg', 'circle', and returns its wrapper object. This element must be attached into an SVG element with .attachTo().

argument: {string} tagName the tag name for the new element.
return: {object} wrapper the new SVG wrapper object.

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

# gySVG.isWrapped ()

Check if an object is an SVG wrapper object or not.

argument: {object} an SVG or an SVGElement object.
return: {boolean} true or false.

gySVG.isWrapped(obj)

# element.add( tagName )

Creates and attach a nested SVG element and returns its Graphery SVG wrapper object.

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

# element.attachTo( selector | element )

Adds the SVG element into the DOM. This method receives as parameter a string with a selector, a DOM element or Graphery SVG wrapper, and puts the SVG element in the DOM.

<div id="content"></div>

const mySvg = gySVG();
mySvg.attachTo('#content');

# element.remove()

Unlinks the object from the parent element.

element.remove();

# element.querySelector( selector )

You can get the first nested element that maches with the selector as parameter.

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

# element.querySelectorAll( selector )

You can get the All nested element that maches with the selector as parameter.

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

# element.children()

Returns an array with all nested elements.

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

# element.parent()

Returns the parent object or null if not exist.

const g = line.parent();

.parent()

# element.closest( selector )

Returns the first parent object that the selector matches or null if not found.

const svg = gySVG();
const g1 = svg.add('g');
const g2 = g1.add('g');
if (svg === g2.closest('svg')) {
  //...
}

# element.cloneNode([true])

Creates 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().

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

# element.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.

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

# element.content(source)

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

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

# element.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.

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

# element.id()

Returns the current unique ID. If the element does not have a unique ID, it is created.

# element.href()

Returns the unique ID as a #id

# element.url()

Returns the unique ID as a url(id)

# element.el

In some cases you need the unwrapped original element. In these cases you can get the original element wrapped with the attribute .el.

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

← Import Attributes, properties and methods →