Home :: DOM :: DOMĀ Builder

  1. Introduction
  2. Reference
    1. Object Variables
      1. VERSION
    2. Methods
      1. constructor
      2. appendTo
      3. remove
    3. Properties
      1. type
      2. attributes
      3. text
      4. node
      5. parent
      6. data
  3. Use
    1. Loading Node_Builder into you SVG Document
    2. Creating an Element
    3. Creating a Hierarchy
    4. Other Examples
  4. Download
  5. History

Introduction

During the course of writing *-Roids, I quickly became desirous of an easier way to dynamically create elements in my SVG documents. I found myself typing the same lines of code over and over again and decided that a JavaScript object could be used in place of this code.

The object creation may seem a little strange to you unless you come from a Perl background. Perl and JavaScript have the ability to associate words with values. These are usually referred to as associative arrays or hashes. These hashes make for a convenient way to refer to SVG element attributes.

The attributes parameter in the constructor method uses an anonymous objects to pass multiple named properties. The only catch is that you will need to place single-quotes around property names that contain hyphens.


Reference

Object Variables

Node_Builder.VERSION

This is a number which represents the current version number for this implementation of the Node_Builder object. This can be used by scripts to check that the correct version of the object is being used.

Methods

constructor - new Node_Builder(type, attributes, text);

appendTo(parent);

remove();

This method removes the node the object represents. All properties are reinitialized.

Properties


Use

Loading Node_Builder into your SVG document

In order to use the Node_Builder object in your SVG file, you will need to insert a <script> element inside of your <svg> element. As an example, if Node_Builder.js is in the same directory as your SVG document, then you would include the Node_Builder object with the following text:

Creating an Element

In order to dynamically create a new element in your SVG document, you will need to create a new Node_Builder object. The following example creates a new circle at (10,10) with a radius of 3 and then adds it to the DOM to be displayed.

circle = new Node_Builder(
  "circle",
  { cx: 10, cy: 10, r: 3, style:"fill: blue" }
);

circle.appendTo(SVGDoc);

The first parameter is the same name that you would use to create the element using SVG only. In this example we are creating a "circle" element. The second parameter is an anonymous object whose properties are the same names that you would use when you declare an SVG element. The third parameter is an anonymous object whose properties are the same names that you would use in the style attribute when you declare an SVG element. The above example is equivalent to:

<circle cx="10" cy="10" style="fill: blue" />

The final statement in the example adds the node created by the Node_Builder object to the DOM. The parameter, SVGDoc in this example, is the parent to which the new node needs to be appended. Typically, the parent node is found using the SVG's document's getElementByID() method.

Creating a Hierarchy

Creating a hierarchy of elements is only slightly more complicated. The following example recreates this SVG tree:

<g>
  <rect x="10" y="10" width="20" height="20 fill="green" />
  <circle cx="50" cy="50" r="5" fill="blue" />
</g>

First, we create the <g> element:

group = new Node_Builder("g", {});

Notice that the second and third parameters are empty objects. Since this <g> element does not contain any attributes or style properties, we need to pass it an empty object.

Next, we create the <rect> element and the <circle> element:

rect = new Node_Builder("rect", {x:10, y:10, width:20, height:20, fill:"green"});
circle = new Node_Builder("circle", {cx:50, cy:50, r:5, fill:"blue"});

Now that we have all of the individual elements, now it's time to build the tree. Every Node_Builder object has a node parameter which is a reference to the node the object creates; however, this property is not defined until we call append(parent) on the object. In order to add the <rect> and <circle> elements to the <g>, we need to know <g>'s node, but that doesn't exist yet. To remedy this, we add the <g> element to the SVG document, and then add the <rect> and <circle> to the <g> element. That completes the hierarchy.

group.appendTo(SVGRoot);
rect.appendTo(group.node);
circle.appendTo(group.node);

Other Examples

Complete SVG examples can be found in the Tutorials section.


Download

Node_Builder.js


History

Version 1.3

Version 1.2

Version 1.1