|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |