Making an SVG DOM JavaScript class

Posted by CryptoQuick on Stack Overflow See other posts from Stack Overflow or by CryptoQuick
Published on 2010-05-27T02:14:32Z Indexed on 2010/05/27 2:21 UTC
Read the original article Hit count: 311

Filed under:
|
|
|

I'm unsatisfied with other JavaScript libraries and frameworks like jQuery, MooTools, and Raphael, because of their inability to support SVG grouping. You'd think it'd be a very simple thing for them to implement.

Anyway, I'm trying to make a JavaScript class (using John Resig's class.js script) like this:

var El = Class.extend({
    el: null,
    svgNS: "http://www.w3.org/2000/svg",

    init: function (type) {
        this.el = document.createElementNS(this.svgNS, type);
    },

    set: function (name, attr) {
        this.el.setAttributeNS(null, name, attr);
    },

    get: function (el, name) {
        var attr = this.el.getAttributeNS(null, name);
        return attr;
    },

    add: function (targEl) {
        targEl.el.appendChild(this.el);
    },

    remove: function (targEl) {
        targEl.el.removeChild(this.el);
    },

    setEl: function (docId) {
        this.el = document.getElementById(docId);
    }
});

I can add elements to the DOM using these statements outside of the class, but storing the element inside the class becomes problematic. Anyone have any creative ideas?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about dom