How to include dojox.gfx.SVG and dojox.gfx.VML in a custom Dojo build with cross-browser support?

Question

Hello everyone.

I am using dojo.gfx to create vector shapes and text on my website and everything works fine when I am "dojo.require"-ing all dependencies in my Javascript. But when I'm building everything I need in a custom build (especially dojox.gfx, dojox.gfx.svg and dojox.gfx.vml), Dojo's automatic differentiation for SVG-supporting browsers and IEs (VML) seems to be breaking.

If I include only dojox.gfx.svg, IE breaks (see below), if I add dojox.gfx.vml, my scripts stop working in Firefox.

In IE, the scripts break in the following line of my custom dojo build saying "Object doesn't support property or method":

*s.rawNode = _createElementNS(svg.xmlns.svg, "svg");*

with _createElementNS being commented with "Internal helper to deal with creating elements that are namespaced. Mainly to get SVG markup output working on IE.".

Right know, I exclude both SVG and VML in my dojo build profile and let dojo xhrGet the rest. This works but requires three more requests (svg.js, shape.js, path.js, although the latter two are included in my build).

What do I need to include in my build to make Vector shapes working in all browsers "out-of-the-box"?

This is my build profile which works but requires the additional three requests (so neither svg nor vml are included explicitly):

dependencies ={
layers:  [
    {
    name: "mybuild-dojo.js",
    dependencies: [
     "dojo.fx",
     "dojox.gfx",
     "dojox.gfx.shape",
     "dojox.gfx.path",
     "dojox.gfx.VectorText",
     "dojox.xml.DomParser",
     "dojox.image.Lightbox",
     "dojo.parser"
    ]
    }
],
prefixes: [
    [ "dijit", "../dijit" ],
    [ "dojox", "../dojox" ],
]

};

Thank you for your answer.

Answer 1

Unfortunately the dojox.gfx code is constructed assuming the right renderer (svg or vml) is pulled in at runtime. So the build you have that just pulls in the top-level dojox.gfx is the way to go.

You could probably hack the code to put an if(dojox.gfx.renderer == "svg"){} around the dojox.gfx files for svg. Probably looking at the dojox.gfx source and the dojo.requireIf() calls at the bottom would give an idea on how to wrap each module.

Answer 2

Have you tried putting:

gfxRenderer:'svg,silverlight,vml'

in your djcongfig settings?

dojox.gfx article on dojocampus