[SOLVED] Simple DOM manipulation in custom aurelia atttribute

Simple DOM manipulation in custom aurelia atttribute

I am experimenting with Aurelia custom attribute by testing a simple DOM manipulation.

To my surprise performing the manipulation by appending and ellipse node to the parent svg node does modify the HTML but doesn't render the ellipse.

Manipulating the innerHtml property does work as expected.

import { bindable, inject} from 'aureliaframework';

@inject(Element)
export class TestCustomAttribute {

    constructor(private element: SVGElement) {
    }
    attached()
    {
        var ellipse = document.createElement("ellipse");
        ellipse.setAttribute("cx","200");
        ellipse.setAttribute("cy","200");
        ellipse.setAttribute("rx","100")
        ellipse.setAttribute("ry","100")
        ellipse.setAttribute("style","fill:blue")

        //this is rendered
        this.element.innerHTML = "<ellipse style='fill: purple' cx='200' cy='200' rx='100' ry='100'></ellipse>"
         
         //this shows on DOM explorer but not rendered
         this.element.appendChild(ellipse)
    }

Is it possible to achieve the desired result using appendNode() instead of manipulating the element innerHtml?

Solution

Looks like this is more of a quirk around the DOM API and SVG elements, rather than an issue with Aurelia.

Try using createElementNS and include the svg namespace instead https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS

See this question for more details: jquery's append not working with svg element?