SVG elements not created using createElementNS

[ScraM-Team]

DomBuilder.java:51 always creates elements using createElement. This works for HTML elements, but for SVG elements it causes the browser to not render the SVG. Using svg elements in a template looks OK in the browser inspect pane, but the SVG is not shown.

Instead, the SVG elements need to get created using createElementNS with the SVG namespace URI. One reference: https://stackoverflow.com/questions/3492322/javascript-createelementns-and-svg

A quick but hacky fix is to check for specific SVG tag names in DomBuilder.open(). Unfortunately there are a couple of overlaps between HTML and SVG (like 'title'), so this isn't a complete solution.

It seems a possible better fix is to change parsing to flag DOMElements as SVG. Once the 'svg' parent is seen, all children can automatically be SVG. Then an overloaded open() could call createElementNS for the SVG-flagged DOMElements.

Alternatively, instead of a flag a DOMElement subtype called SVGElement could be created.

[ScraM-Team]

I tried out the hacky fix and it does work. It enables using 'attr:' annotations in SVG to make SVG drawings bound to Flavour expressions. This could be useful for making drawings react to value changes in many scenarios, from live charts to games and more.

[ScraM-Team]

Demo here showing an SVG circle's radius bound to a slider: https://frequal.com/TeaVM/demo/svgflavour/

These are the diffs to DomBuilder. This is the "hacky" solution, which would require enumerating all SVG element names in a list and figuring out how to handle conflicting element names like 'title'.

public class DomBuilder {
+
+  private static final String SVG_NS_URI = "http://www.w3.org/2000/svg";
     private static final Document document = Window.current().getDocument();
     private Slot slot;
     private Deque<Item> stack = new ArrayDeque<>();
     private List<Renderable> renderables = new ArrayList<>();
+  private static final List<String> listSvgTagNames = Arrays.asList(
+          "svg",
+          "circle");
 
     public DomBuilder(Slot slot) {
         this.slot = slot;
@@ -48,7 +54,12 @@
     }
 
     private DomBuilder open(String tagName, boolean slot) {
-        Element elem = document.createElement(tagName);
+    Element elem = null;
+    if (listSvgTagNames.contains(tagName)) {
+      elem = document.createElementNS(SVG_NS_URI, tagName);
+    } else {
+      elem = document.createElement(tagName);
+    }
         Item item = new Item();

[ScraM-Team]

I just checked in a less-hacky fix and created a PR: #69