Unable to create SVG elements (Element vs SVGElement)

[sdarnell]

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.

[erik-kallen]

1. Document.CreateElementNS should probably return an XmlElement instead, I guess. In the meantime, you can use (SVGElement)(object)Document.CreateElementNS(...).
2. Maybe this is the case. I haven't regenerated the bindings from Mozilla's webidl in a long time because I have more important things to do (roslyn port).
3. If MDN says they are readonly, they most likely are readonly. How to use them, I don't know, you will have more luck asking the question on StackOverflow with an SVG tag (it is not specific to the C# compilation process at all).

[erik-kallen]

(it does seem to me after some MDN surfing that the way to change the x property is something like mySvgRect.x.baseVal.value = 42 but I might be wrong).

[sdarnell]

Ok, thanks for the information - as you say, it appears that you need to use 'baseVal.value, and because of the various possible units I this makes sense. Though I didn't find any examples of people using it :) The uses I saw, people just set the attribute with setAttribute(). Which I guess is simpler.

Thanks for your help, and sorry for the distraction.

[erik-kallen]

No worries.

And, you did point out a metadata problem in Document.CreateElementNS().