SVG DOM Helper

Author: Domenico Strazzullo
Creative Commons License
This work is licensed under a Creative Commons Attribution-No Derivative Works 3.0 Unported License.
  1. Description
  2. SVG DOM Helper function
  3. Use
  4. Examples
  5. HTML DOM Helper function
  6. HTML DOM Helper function for use with <foreignObject>
Download DOMjs.zip

DESCRIPTION

The DOM Helper is fully covered in the July issue of SVG Magazine http://www.svgmagazine.com/jul2011/dom-helper.html.

This progressive SVG DOM Helper, like its two derivatives HTML for plain HTML, and HTML_FO for use with <foreignObject>, is a universal node builder. Universal in the sense that it will work for any SVG element, eliminating the need for defining individual proprietary classes for SVG elements, with their necessarily limited and arbitrary collection of n properties/attributes, or cumbersome detection methods. The underlying concept is that of interfacing the SVG library (the implementation) directly, using its vocabulary and grammar, thus skipping the need for redundant pseudo-languages.

The SVG DOM Helper is one of the core components of the Pergola JavaScript-SVG framework and libraries, and is known to work flawlessly. It is also used extensively at the user end in all the examples and applications built with Pergola.

SVG DOM helper function

USE

The function expects 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.

  SVG({
    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.

The function returns the element. If the call is assigned to a variable or property, its value is then a reference to the element in the DOM tree.

EXAMPLES

An <svg> element:

var svg = SVG({
  element: "svg",
  id: this.id,
  x: this.x,
  y: this.y,
  width: this.width,
  height: this.height,
  appendTo: document.documentElement
});

A <g> element appended to the svg above:

SVG({element: "g", transform: "translate(100 100)", appendTo: svg});

A <linearGradient> element:

var gradient = SVG({
  element: "linearGradient",
  id: "buttonMaskGrad",
  x1: "0%",
  y1: "0%",
  x2: "0%",
  y2: "100%",
  gradientUnits: "objectBoundingBox",
  appendTo: defs
});
SVG({element: "stop", offset: "...", "stop-color": "...", appendTo: gradient});
SVG({element: "stop", offset: "...", "stop-color": "...", appendTo: gradient});

A <circle> element:

SVG({
  element: "circle",
  r: 9,
  fill: "none",
  stroke: "red",
  appendTo: node
});

A <text> element:

SVG({
  element: "text",
  x: 80,
  y: 40,
  'font-family': "'Trebuchet MS'",
  'font-size': "18pt",
  'text-anchor': "middle",
  textNode: "COOL",
  'pointer-events': "none",
  appendTo: document.documentElement
});

A <rect> element:

var myRect = SVG({
  element: "rect",
  x: 40,
  y: 40,
  width: 400,
  height: "3in",
  transform: "scale(.5)"
  fill: "blue",
  stroke: "gray",
  'stroke-width': 8,
  'stroke-dasharray': "4,5",
  'fill-opacity': .5,
  appendTo: node
});

HTML DOM helper function

Note that unlike the SVG DOM Helper, where you can use the textNode property only when creating a <text> or <tspan> element, with the HTML DOM Helper you can set it for all elements that can contain a text node.

HTML DOM helper function for use with <foreignObject>

Use this code to produce html code in <foreignObject> (first create a <foreignObject> element with the SVG DOM Helper).

Note that unlike the SVG DOM Helper, where you can use the textNode property only when creating a <text> or <tspan> element, with the HTML_FO DOM Helper you can set it for all elements that can contain a text node.