SVG Script Tricks

Here are some bits of ECMAScript which you can use in your SVG UI files.

Delete all children of a group:

ECMAScript:

  function remove_children(parent) {
    var obj, ls;
    ls = parent.childNodes;
    while (ls.length > 0) {
      obj = ls.item(0);
      parent.removeChild(obj);
    }
  }

Change the text of a <text> element

ECMAScript:

  function change_text(textobj, newstring) {
    var newnode;
    remove_children(textobj);
    newnode = document.createTextNode(newstring);
    textobj.appendChild(newnode);
  }

Change what a <use> element refers to

SVG:

  <use id="id1" xlink:href="#old_reference" />

ECMAScript:

  useobj = document.getElementById("id1");
  useobj.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#new_reference");

Create an object which uses a template

The SVG Tricks page describes how to use a <use> element to display many copies of a predefined shape. Sometimes you want to create more copies with script code.

SVG:

  <defs>
  <g id="template">
    <rect x="-20" y="-20" width="40" height="40"
      fill="red" />
    <circle cx="0" cy="0" r="23"
      fill="green" />
  </g>
  </defs>

ECMAScript:

  svg_ns = "http://www.w3.org/2000/svg";
  xlink_ns = "http://www.w3.org/1999/xlink";
   
  useobj = document.createElementNS(svg_ns, "use");
  useobj.setAttributeNS(xlink_ns, "href", "#template");
  useobj.setAttribute("x", "50");
  useobj.setAttribute("y", "50");
  document.rootElement.appendChild(useobj);

We create a new <use> object, and then apply the previous trick to set what it refers to. Then we set a position (by setting the x and y attributes), and finally append it to the document.

See also

SVG Tricks