SVG / NS Support about morphdom HOT 13 CLOSED

Hey Streetstrider.
I found this repo and started my own implementation that actually supports what you are looking after.
https://github.com/shock01/oig-dr

Its' not feature complete yet regarding DOMElement properties which can't be set using properties like HTMLInputElement.prototype.indeterminate but that will be added shortly.

@patrick-steele-idem . Creating attributes should be done using createAttributeNS
where attributeNS can/will be null for HTMLElement.

Also you should use createElementNS or use importNode to make sure SVG Elements get rendered properly

Example:

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <a xlink:href="/svg/index.html">
        <text x="10" y="20">/svg/index.html</text>
    </a>
    .......
</svg>

Attribute xlink:href cannot be set using setAttribute but should use:
setAttributeNS('http://www.w3.org/1999/xlink', 'href', '/svg/index.html')

from morphdom.

Let me take a look. There is one test related to SVG that is passing, but it does look like more work needs to be done there to support SVG.

Thanks for sharing details @shock01. One thing to note, @shock01, is that your implementation lacks a lot of features that morphdom offers. That is completely fine if you don't need those features but I just want point out that our implementations are not interchangeable. Specifically, morphdom supports matching up elements by id and it provides a variety of hooks that can be invoked during the transformation.

from morphdom.

True. The goals of both libraries are different and i have no plans to support hooks :-)
If you need help with SVG please ping me

from morphdom.

@StreetStrider Interestingly, I've added more SVG tests and all tests are passing even when using the non-namespace aware DOM API methods. I've tested Firefox, Chrome and Safari (not IE). Which browser are you testing with?

from morphdom.

Equality in strings does not mean that the SVG will be rendered correctly.
Elements from a different namespaces need to be added to the other dom by using importNode otherwise it will fail to render on some browsers.
Also attributes with namespaces need to be set with setAttributeNS for the same reason

from morphdom.

it will fail to render on some browsers.

That's what I am trying to determine. Everything works fine in Chrome, Firefox and Safari as long as a default svg namespace (xmlns="http://www.w3.org/2000/svg") is used instead of (xmlns:svg="http://www.w3.org/2000/svg"):

<div>
    <svg height="100" width="100" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <circle cx="60" cy="60" r="10" />
        <rect width="100" height="100" />
        <a xlink:href="/svg/index.html">
            <text x="10" y="20">/svg/index.html</text>
        </a>
    </svg>
</div>

The input and output DOM render perfectly fine when the default namespace is svg.

If it works fine in IE then that is a limitation that I can live with, but we would need to make it clear in the docs.

Equality in strings does not mean that the SVG will be rendered correctly.

Maybe, but namespaceURI is the resolved namespace as interpreted by the browser. As long as it is correct then everything should render correctly.

from morphdom.

If i could run it locally i could investigate and fix.
Using default namespace works because HTML5 is non namespace aware and will render SVG element like if its a proper SVG element (it's part of the HTML5) spec. When the elements uses namespace prefixes like svg: it most prob will not detect it's a proper svg element.

So namespace aware methods should be used i presume to make this work.
The namespace can be resolved using lookupNamespaceURI and prefix of namespace using lookupPrefix.

The HTML5 aware browser will render but might not render the svg:svg because of this

from morphdom.

    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
    svg.setAttribute('width', 200)
    svg.setAttribute('height', 200)

    var svgNS = svg.namespaceURI

    var rect = document.createElementNS(svgNS, 'rect')
    rect.setAttribute('x', 5)
    rect.setAttribute('y', 5)
    rect.setAttribute('width', 100)
    rect.setAttribute('height', 100)
    rect.setAttribute('fill','#95B3D7')
    svg.appendChild(rect)
    // document.body.appendChild(svg) // (1)

    var nodeSvg = document.getElementById('svg')
    morphdom(nodeSvg, svg)

Now

document.querySelector('svg').namespaceURI
// → "http://www.w3.org/1999/xhtml"
// in the time SVG must have "http://www.w3.org/2000/svg"

When I manually insert svg node (1) it works ok.

from morphdom.

I'm interested in helping out with this one. I'm using morphdom and have written some tests around preservation of namespaced elements and attributes in my own implemenation, but I had false positives because the namespaces are being ignored. Previously, I was testing with jsdom (which aims for browser-like behavior) and comparing the before and after outerHTML; as soon as I started comparing the resulting DOM with getAttributeNS(), the tests failed.

from morphdom.

Hey @shawnbot, it would be great to get some help with this. When I was working on this previously I found that things worked differently in different browsers. If I remember correctly, newer browsers didn't need namespaces for SVG elements, but older browsers did. I would hope we could avoid making morphdom be fully namespace aware since it will make the code larger and likely slower. My hope is that we could maybe have a different version that is namespace aware for older browsers, or we could write the code in such a way that namespaces are only used if running in older browsers.

Thoughts?

from morphdom.

Yeah, it depends on how the elements are created in the first place: If you just use <svg> or an xlink:href attribute without the corresponding xmlns attributes in an HTML5 doc, the namespace URIs are inferred. You can confirm this by popping open the Chrome dev tools on a page with an SVG element in it and running:

console.log(document.querySelector('svg').namespaceURI);

Which, on github.com, yields http://www.w3.org/2000/svg, even though the element lacks an xmlns attribute. Setting innerHTML yields the same behavior in HTML5 docs, AFAIK.

If you create them in JavaScript without using createElementNS() or setAttributeNS(), though, they won't work. Some browsers (older versions of IE, I think) translate qualified names (xlink:href) into their namespaced equivalents, but more compliant browsers don't.

I can take a look at this tonight, and hopefully work up a PR by the end of the week. 💪

from morphdom.

That would be extremely helpful @shawnbot. Thank you for working on this! I'll be happy to review the PR or answer any questions you might have. Thanks again.

from morphdom.

Fixed by #61

New version published: [email protected]

from morphdom.