There might be another way possible - using a composite SVG consisting of all states drawn linearly and using it like a sprite sheet. This could be used in conjunction with CSS. Another advantage would be that we can do 9-slice scaling this way.
Om On Fri, Feb 28, 2014 at 11:58 PM, OmPrakash Muppirala <[email protected]>wrote: > Alex: >> > The question is: what is the most efficient representation of FXG/SVG on >> the JS side? Should it be SVG markup, or data structures that you can use >> to call the createElementNS/setAttributes in a loop? Or just linear JS >> code making those calls? We stopped using linear AS code for MXML codegen >> because it is faster/smaller to generate a data structure and run a loop >> where the JIT-compilation is re-used. >> > > I did some performance benchmarks on the two ways to draw SVG using JS. > The tests and the results are available here: > http://jsperf.com/various-ways-of-drawing-svg-in-js > > The Pure JS method looks like this: > > var Rect = function(x, y, h, w, fill) { > > > var NS = "http://www.w3.org/2000/svg";; > var SVGObj = document.createElementNS(NS, "rect"); > > > SVGObj.width.baseVal.value = w; > SVGObj.height.baseVal.value = h; > > SVGObj.setAttribute("x", x); > SVGObj.setAttribute("y", y); > > > SVGObj.style.fill = fill; > return SVGObj; > } > > The closest to a "SVG.innerSVG" would be using the DOMParser() to parse a > SVG element xml and generate a DOM object out of it. The method looks like > this: > > var domparser = new DOMParser(); > > var RectXML = function(x, y, w, h, fill) { > > var rectElement = domparser.parseFromString( > '<rect xmlns="http://www.w3.org/2000/svg"; x="' + x + '" y="' + y + '" > width="' + w + '" height="' + h + '" style="fill:' + fill + '"/>', > > > 'image/svg+xml'); > return rectElement.documentElement; > } > > Running these two tests side by side, the pure JS method is much much > faster than the DOMParser() method. The Pure JS method using the > document.createElementNS() is clearly the favorite here. > > Alex, did you have any other technique in mind for us to performance > test? I wasnt quite sure how to do the "data structures" way. Do you want > to share a working snippet? > > Thanks, > Om > > >
