Snap cloning of W3C-JavaScript created elements doesn't work

[Blaine Simpson]

Instantiating a Snap element from declarative elements works great, like:

    <a id="a_declarative">

    ...

    const aTpl = s.select("#a_declarative");

    // can clone aTpl, add attrs to the clone, and add that to DOM

but if the pre-snap element is generated with very standard JavaScript using W3C API, the generated Snap element doesn't work right:

    const w = document.createElement("a");

    w.id = "a_coded";

    document.getElementsByTagName("svg")[0].appendChild(w);

    const aTpl = Snap(w);

    // clones of aTpl, with appropriate attributes, will not render

When Snap element created from declarative element, I can add a clone of aTpl to the DOM and it works.  If I do same thing with Snap element created from JavaScript-created element the clones of it won't render though the generated code (by document.documentElement.innerHTML) is exactly the same.  I think this proves that the limitation is an internal limitation of Snap.

The problem is general, not specific to a elements.  It's important to me for a elements because Snap doesn't support SVG a elements.

Here's another example of the problem with a rect where I set the attrs on the template (as opposed to setting them in the clones):

WORKS:

    <circle id="b_declarative" cx="250" cy="100" r="50" fill="green" />

    ...

    const aTpl = s.select("#b_declarative");

NO WORK:

    const w = document.createElement("rect");

    w.id = "b_coded";

    w.cx = "250";

    w.cy = "100";

    w.r = "50";

    w.fill = "green";

    document.getElementsByTagName("svg")[0].appendChild(w);

    const aTpl = Snap(w);

I've skipped the code to clone and add to DOM to keep the examples short, since that code the same in both cases.

If any body knows how I can get Snap to work correctly with a document.createElement element, please share.

[Ian]

I think you're javascript is wrong for creating svg elements.

I think you should be using document.createElementNS("http://www.w3.org/2000/svg", "a");

The namespace is important in SVG. 

Also thinking about it, for setting attributes, you may need to set an xlink:href on it, rather than href (just thinking about reply I just did on other post)....so

mylink.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', "page.html"); 

[Blaine Simpson]

Wow.  I almost didn't post because this group is so inactive.  What an insightful and complete answer!

I'm not working with HTML file at all, only a SVG file that contains my JavaScript and JavaScript imports.  With this setup, at least, I only needed to swap my document.createElement call for your document.createElementNS call and now  things work, including the distinctive attributes that I'm setting.

Thanks for setting me straight.