fix: SVG elements (text and shapes) in the repeat directive are not rendered by the browser

[uivanovic]

🐛 Bug Report

When trying to render SVG elements (text and shapes) from within the repeat directive, the nodes are present in the DOM but they are not rendered by the browser. Elements outside of the repeat directive are correctly rendered.

The following two screenshots highlight some of the differences between the working element (from outside the repeat directive) and a non-working element (from inside the repeat directive):

• Styles are applied to the working element but not applied to the non-working one
• There's a subtle difference in tagName and nodeName of the elements

Working element:

Non-working element:

💻 Repro or Code Sample

https://stackblitz.com/edit/node-nszhmz?file=src%2Fjs%2Ftag%2Ftag.ts,src%2Ftemplates%2Findex.html,src%2Fjs%2Ftag%2Ftag.ts&v=1

🤔 Expected Behavior

SVG elements are rendered as expected

😯 Current Behavior

SVG element DOM nodes are present in the DOM but not recognized/rendered by the browser

💁 Possible Solution

Might have something to do with SVG namespaces. Attributes in SVG elements might need to be set with setAttributeNS instead of setAttribute. There are several somewhat similar issues on StackOverflow and other forums that point to namespaces as a potential issue.

🔦 Context

FAST components don't seem to be able to dynamically render SVG elements from the repeat directive. Reproduced in Chrome, Firefox (locally + stackblitz) and Safari (locally).

🌍 Your Environment

• MacOS Monterey 12.3.1 (21E258)
• Chrome Version 107.0.5304.121 (Official Build) (x86_64)
• Firefox 108.0.2 (64-bit)
• Safari Version 15.4 (17613.1.17.1.13) (Stackblitz unfortunately doesn't work in Safari but I reproduced it locally)

[KingOfTac]

This may be browser limitation since svgs are not actually html but an xml syntax. This needs more investigating to know for sure.

[uivanovic]

Thanks for the quick response @KingOfTac. Here's a short snippet for reference that generates a dynamic SVG in native JS, and highlights the difference between createElementNS and createElement

let textColors = ['red', 'green', 'black', 'blue', 'magenta']

let svgElNS = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgElNS.setAttribute('viewBox', '0, 0, 240, 240');
svgElNS.setAttribute('width', '240');
svgElNS.setAttribute('height', '240');
document.body.appendChild(svgElNS);

// text nodes created via createElementNS are rendered correctly
for (let i=0; i<textColors.length; i++) {
    let textElNS = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    textElNS.setAttribute('x', '30');
    textElNS.setAttribute('y', String(15 + 15 * i));
    textElNS.setAttribute('fill', textColors[i]);
    textElNS.setAttribute('transform', 'rotate(30 20,40)');
    textElNS.innerHTML = 'Text el with NS';
    svgElNS.appendChild(textElNS);
}

// text nodes created via createElement can be seen in the DOM but are not rendered
for (let i=0; i<textColors.length; i++) {
    let textEl = document.createElement("text");
    textEl.setAttribute('x', '90');
    textEl.setAttribute('y', String(15 + 15 * i));
    textEl.setAttribute('fill', textColors[i]);
    textEl.setAttribute('transform', 'rotate(30 20,40)');
    textEl.innerHTML = 'Text el without NS';
    svgElNS.appendChild(textEl);
}

dynamic-svg-elements-native-js.mov