I'm trying to create SVG elements and I'm struggling to figure out how it is meant to work.
There are three main problems.
Firstly Document.CreateElementNS("http://www.w3.org/2000/svg", "svg") works, but returns an Element, which I can't easily convert to an SVGSVGElement (which extends SVGGraphicsElement, SVGElement, and XmlElement). The Element.As<T>() method has a type constraint of Element.
Similarly, some of the other methods such as GetElementById() mean that even if the SVG element exists, you can't get it back as the right type.
I have a hack for this first issue, which essentially does what the As() does.
The second issue is a follow on of the above. How do I create sub nodes of the SVG? In JS you would just use document.createElementNS() again. The reason I mention it separately, is that in JS some SVG related objects have createXXX() methods on the SVGSVGElement.
The third aspect is that even when you have created, say, an SVGRectElement, the properties are read only, so you can't set the width/height,x,y,rx,ry. Limiting the usefulness of these classes.
The DOM interface : https://developer.mozilla.org/en-US/docs/Web/API/SVGRectElement also says the properties are readonly.
So how am I meant to set attributes of the SVGElement?
Ultimately, I guess that I'm just misunderstanding how to drive the interface.
So if there any examples of creating an element and some simple shapes inside that you could point me at, that would be a great help.