/* html2canvas @VERSION@ Copyright (c) 2011 Niklas von Hertzen. All rights reserved. http://www.twitter.com/niklasvh Released under MIT License */ // WARNING THIS file is outdated, and hasn't been tested in quite a while html2canvas.Renderer.SVG = function( options ) { options = options || {}; var doc = document, svgNS = "http://www.w3.org/2000/svg", svg = doc.createElementNS(svgNS, "svg"), xlinkNS = "http://www.w3.org/1999/xlink", defs = doc.createElementNS(svgNS, "defs"), i, a, queueLen, storageLen, storageContext, renderItem, el, settings = {}, text, fontStyle, clipId = 0, methods; methods = { _create: function( zStack, options, doc, queue, _html2canvas ) { svg.setAttribute("version", "1.1"); svg.setAttribute("baseProfile", "full"); svg.setAttribute("viewBox", "0 0 " + Math.max(zStack.ctx.width, options.width) + " " + Math.max(zStack.ctx.height, options.height)); svg.setAttribute("width", Math.max(zStack.ctx.width, options.width) + "px"); svg.setAttribute("height", Math.max(zStack.ctx.height, options.height) + "px"); svg.setAttribute("preserveAspectRatio", "none"); svg.appendChild(defs); for (i = 0, queueLen = queue.length; i < queueLen; i+=1){ storageContext = queue.splice(0, 1)[0]; storageContext.canvasPosition = storageContext.canvasPosition || {}; //this.canvasRenderContext(storageContext,parentctx); /* if (storageContext.clip){ ctx.save(); ctx.beginPath(); // console.log(storageContext); ctx.rect(storageContext.clip.left, storageContext.clip.top, storageContext.clip.width, storageContext.clip.height); ctx.clip(); }*/ if (storageContext.ctx.storage){ for (a = 0, storageLen = storageContext.ctx.storage.length; a < storageLen; a+=1){ renderItem = storageContext.ctx.storage[a]; switch(renderItem.type){ case "variable": settings[renderItem.name] = renderItem['arguments']; break; case "function": if (renderItem.name === "fillRect") { el = doc.createElementNS(svgNS, "rect"); el.setAttribute("x", renderItem['arguments'][0]); el.setAttribute("y", renderItem['arguments'][1]); el.setAttribute("width", renderItem['arguments'][2]); el.setAttribute("height", renderItem['arguments'][3]); el.setAttribute("fill", settings.fillStyle); svg.appendChild(el); } else if(renderItem.name === "fillText") { el = doc.createElementNS(svgNS, "text"); fontStyle = settings.font.split(" "); el.style.fontVariant = fontStyle.splice(0, 1)[0]; el.style.fontWeight = fontStyle.splice(0, 1)[0]; el.style.fontStyle = fontStyle.splice(0, 1)[0]; el.style.fontSize = fontStyle.splice(0, 1)[0]; el.setAttribute("x", renderItem['arguments'][1]); el.setAttribute("y", renderItem['arguments'][2] - (parseInt(el.style.fontSize, 10) + 3)); el.setAttribute("fill", settings.fillStyle); // TODO get proper baseline el.style.dominantBaseline = "text-before-edge"; el.style.fontFamily = fontStyle.join(" "); text = doc.createTextNode(renderItem['arguments'][0]); el.appendChild(text); svg.appendChild(el); } else if(renderItem.name === "drawImage") { if (renderItem['arguments'][8] > 0 && renderItem['arguments'][7]){ // TODO check whether even any clipping is necessary for this particular image el = doc.createElementNS(svgNS, "clipPath"); el.setAttribute("id", "clipId" + clipId); text = doc.createElementNS(svgNS, "rect"); text.setAttribute("x", renderItem['arguments'][5] ); text.setAttribute("y", renderItem['arguments'][6]); text.setAttribute("width", renderItem['arguments'][3]); text.setAttribute("height", renderItem['arguments'][4]); el.appendChild(text); defs.appendChild(el); el = doc.createElementNS(svgNS, "image"); el.setAttributeNS(xlinkNS, "xlink:href", renderItem['arguments'][0].src); el.setAttribute("width", renderItem['arguments'][0].width); el.setAttribute("height", renderItem['arguments'][0].height); el.setAttribute("x", renderItem['arguments'][5] - renderItem['arguments'][1]); el.setAttribute("y", renderItem['arguments'][6] - renderItem['arguments'][2]); el.setAttribute("clip-path", "url(#clipId" + clipId + ")"); // el.setAttribute("xlink:href", ); el.setAttribute("preserveAspectRatio", "none"); svg.appendChild(el); clipId += 1; /* ctx.drawImage( renderItem['arguments'][0], renderItem['arguments'][1], renderItem['arguments'][2], renderItem['arguments'][3], renderItem['arguments'][4], renderItem['arguments'][5], renderItem['arguments'][6], renderItem['arguments'][7], renderItem['arguments'][8] ); */ } } break; default: } } } /* if (storageContext.clip){ ctx.restore(); } */ } h2clog("html2canvas: Renderer: SVG Renderer done - returning SVG DOM obj"); return svg; } }; return methods; };