PERGOLA LOGO

DOM

Pergola introduced a progressive concept for creating nodes without defining proprietary pseudo-classes, but rather using the existing SVG or HTML classes library represented by the implementation itself. The pergola.SVG function is therefore an interface. It has one variant for HTML elements and one for HTML as foreignObject elements (same as HTML but in the xhtml namespace). The rationale of this concept is explained in the SVG magazine DOM Helper article.

The functions expect an object defining the element to be created, a parent node –which can create itself in parallel scope– and a collection of attributes specified using the language's vocabulary and grammar.

The method returns the element created in the appropriate namespace.

Creating SVG elements

pergola.SVG(object)

object:

  {
    element : "element name",
    attributeName : attribute value,
    "attribute-Name" : attribute value,
    textNode : String,
    appendTo : node
  }

The element string property is required and must be the first property specified. The textNode string property is optional and can be set for text and tspan elements. The appendTo node property is optional; appending can be deferred using the appropriate DOM methods. All other property names will correspond strictly to the element's attributes, and attribute names containing illegal characters for JavaScript variable names must use the string notation, e.g. "font-family", or "xlink:href". The style and class attributes can also be set. To call this function you can use the shortcut $C.

Creating HTML elements

pergola.HTML(object)

object is the same as in SVG, but the textNode property can be set for all HTML tags that can have a text node. To call this function you can use the shortcut $H.

Creating HTML elements as foreignObject

pergola.HTML_FO(object)

object is the same as in SVG, but the textNode property can be set for all HTML tags that can have a text node. Nodes created by this function are in the xhtml "http://www.w3.org/1999/xhtml" namespace.

Use examples here, and in several Pergola examples.