Support SVG / xmlns in JSX

[brianmhunt]

Some nodes require document.createElementNS.

We always respect the xmlns attribute, and then wield it appropriately i.e. change jsxToNode to:

  const attribs = unwrap(jsx.attributes)
  const node = attribs && 'xmlns' in attribs
    ? document.createElementNS(attribs.xmlns, jsx.elementName)
    : document.createElement(jsx.elementName)

We also need to use setAttributeNS, removeAttributeNS, and getAttributeNS.

To reduce the amount of repetition of the xmlns attribute we could also keep track of the xmlns for nodes where a parent element has xmlns set.

It looks like the only NS we need to track is http://www.w3.org/2000/svg, and we could do that automatically when we encounter the <svg> tag.

Thanks @ctcarton for pointing this out.

[brianmhunt]

@mbest Do you know anything about this sort of thing?

[mbest]

I don't think Knockout has ever supported templates within an <svg> element so we haven't had to deal with this.

[brianmhunt]

Looks like this is well documented here: https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course