On Wed, Jan 12, 2011 at 8:42 PM, Raks A <[email protected]> wrote:
> I could achieve the task without using the SVG DOM API and instead using the
> basic DOM API of createElementNS, setAttributeNS and createTextNode
>
> Would it have been possible to directly use SVG specific APIs to achieve the
> same task
The way you've done it is exactly right - the SVG DOM is an extension
of the basic DOM API - that is to say horribly verbose but at least
familiar :)
There's no easy way provided in the SVG DOM to create a <text>
element, unfortunately. This means to create a single svg:text
element, it's about 6 lines of JS code:
var textElem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
textElem.setAttribute('x', '20');
textElem.setAttribute('y', '50');
textElem.setAttribute('style', 'font-size:...etc...');
var textContent = document.createTextNode('The DOM is lovely');
textElem.appendChild(textContent);
someG.appendChild(textElem); // add it into my document
This inevitably leads anyone writing non-trivial web apps to write
their own 'create an element' function.
function createSVGElement(tagName, attrMap) {
var elem = document.createElementNS(svgns, tagName);
for (var attr in attrMap) {
elem.setAttribute(attr, attrMap[attr]);
}
return elem;
}
createSVGElement('text', {'x':'20', 'y':'50'});
Of course watch out for xlink: namespaced attributes. Fun-times.
I remember there was going to be some effort from the W3C DOM/SVG
Working Group to improve the usability of the DOM (i.e. provide
constructors would be a good first step), but don't know the status of
that activity.
Sadly, since SVG was born in an XML context, innerHTML will not work,
but I would assume that browsers will enable that at some point for
SVG elements, that will really help templating languages. I even went
so far as to write a crazy library for it:
http://innersvg.googlecode.com/ but beware that it uses DOMParser to
achieve the effect *shudder*
Regards,
Jeff
------------------------------------
-----
To unsubscribe send a message to: [email protected]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)
<*> To change settings via email:
[email protected]
[email protected]
<*> To unsubscribe from this group, send an email to:
[email protected]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
