fix: SVG elements (text and shapes) in the repeat directive are not rendered by the browser #6599
Labels
community:help-wanted
Valuable contributions not currently worked on by the core team
status:needs-investigation
Needs additional investigation
🐛 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 therepeat
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 therepeat
directive):tagName
andnodeName
of the elementsWorking 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 ofsetAttribute
. 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
The text was updated successfully, but these errors were encountered: