Dynamic SVG

While the creation of “Dynamic HTML” has itself been ensnarled by browser incompatibilities in the DOM and by inconsistent versions of JavaScript, the ways of creating new SVG objects using JavaScript follow the DOM2/XML approach of creating a node, assigning attributes to it and then appending it as a child to a parent node of the XML parse tree.

The following example illustrates the basic mechanism of using events within the SVG DOM to generate new objects and append them into the DOM.

The above code takes the coordinate of the mouse click (evt.clientX,evt.clientY) and generates an ellipse centered at that point. The color is chosen cyclically from an array. The ellipse is then appended to the Root of the document (the target of the onload evt).