On 15/10/2010 09:52 AM, Invisible wrote:

> What this means is that, in theory, it ought to be possible to write
> some JavaScript which *draws pictures* inside a web page.
>
> Now I can go off, try this, waste several hours of my life, and discover
> that it doesn't work at all. See you in a few hours. ;-)

Almost unbelievably, this insanity actually works!

There are several snags along the way, however.

First, I was using the w3schools DOM reference, which helpfully omits 
several utterly critical API calls. For example:

http://www.w3schools.com/jsref/dom_obj_document.asp

Note how there's absolutely no mention of createElement() and friends. 
You're really not going to get very far without that. (!)

Instead I turned my attention to the Gecko DOM reference (which 
unfortunately lists Gecko-specific extensions as well). Here I can at 
least look up the correct damned method names! So that fixes that.

Next problem is that I can delete SVG elements, and they vanish from the 
screen, however calling createElement() followed by appendChild() 
doesn't appear to work at all. Works just fine for HTML, fails miserably 
for SVG. So, what, maybe Firefox doesn't support that yet?

Nope. It turns out you have to use createElementNS() instead. And you 
have to supply the entire 20-mile namespace string every single 
god-damned time you call it. Even though it's declared as a prefix in 
the root of the XML document. Apparently W3C did this on purpose. Isn't 
that wonderful? >_<

Fortunately I can just drop the (huge) namespace string into a global 
variable and access it from there. But I ask you! Why do it this way?

The next problem is with trying to add text. It turns out that the 
innerHTML property only works for... HTML. (Surprise!) Yeah, it's right 
there in the name. If you're working on HTML, you can use the innerHTML 
property to quickly and easily construct static document fragments. But 
if you're working on any other type of data (for example... SVG), this 
apparently stops working completely. Fortunately, in this instance I 
just need to quickly call createTextNode() and I'm golden.

The final problem is positioning text. Usually when you do this, there 
is either some way to specify sophisticated layout constraints, or else 
some way to query the font metrics so you can do the positioning 
yourself. SVG appears to provide neither of this. The result is that 
it's highly non-trivial trying to center my text...

Other than that, everything works perfectly. :-|

Post a reply to this message