CODEWITHSUNDEEP
jqueryxml-namespaces
CW Holeman II
CW Holeman II

Reputation: 4971

What is jQuery for Document.createElementNS()?

What is jQuery for Document.createElementNS()?

function emleGraphicToSvg(aGraphicNode) {
  var lu = function luf(aPrefix){
    switch (aPrefix){
      case 'xhtml': return 'http://www.w3.org/1999/xhtml';
      case 'math':  return 'http://www.w3.org/1998/Math/MathML';
      case 'svg':   return 'http://www.w3.org/2000/svg';
      }
    return '';
    };
  var svg = document.evaluate("svg:svg",
    aGraphicNode, lu, XPathResult.FIRST_ORDERED_NODE_TYPE, null).
    singleNodeValue;
  $(svg).children().remove();
  rect = document.createElementNS(lu('svg'), "rect");
  rect.setAttribute("x", "35");
  rect.setAttribute("y", "25");
  rect.setAttribute("width", "200");
  rect.setAttribute("height", "50");
  rect.setAttribute("class", "emleGraphicOutline");
  svg.appendChild(rect);
  }

The code is a simplified fragment from Emle - Electronic Mathematics Laboratory Equipment JavaScript file emle_lab.js.

The Look-Up-Function, luf(), maps a complete reference to a shorten name for the namespace in the XPath string and createElementNS(). The existing svg:svg is located, removed and replaced by a new rectangle.

Upvotes: 12

Views: 6390

Answers (2)

Jason C
Jason C

Reputation: 40426

What is jQuery for Document.createElementNS()?

That would be:

$(document.createElementNS('namespace', 'tag'))

So in the OP's case:

rect = $(document.createElementNS(lu('svg'), 'rect'))
    .addClass('emleGraphicOutline')
    .attr({
        x: 35,
        y: 25,
        width: 200,
        height: 50
    });

But not much is really gained by using jQuery for that, of course. In any case, one can always wrap DOM nodes in jQuery with e.g. $(rect) after creating rect with vanilla JS.

Note that jQuery has other issues with SVG, such as breaking viewBox due to lowercasing attributes, so plain JS must still be used for some attributes.

Upvotes: 5

ndim
ndim

Reputation: 37905

For SVG, I have used Keith Wood's jquery.svg for some evaluation type projects.

Upvotes: 2

Related Questions