diff --git a/examples/svgviewer/README.md b/examples/svgviewer/README.md
new file mode 100644
index 000000000..089d3050b
--- /dev/null
+++ b/examples/svgviewer/README.md
@@ -0,0 +1,8 @@
+## PDF.js using SVG
+
+This is a project for implementing alternate backend for PDF.js using Scalable Vector Graphics. This is still a WIP.
+Take a look at [proposal](https://docs.google.com/document/d/1k4nPx1RrHbxXi94kSdvW5ay8KMkjwLmBEiCNupyzlwk/pub) for this project.
+
+## Getting started
+
+Take a look at src/display/svg.js to see the SVG rendering code.
diff --git a/examples/svgviewer/index.html b/examples/svgviewer/index.html
new file mode 100644
index 000000000..2fb5ce8a0
--- /dev/null
+++ b/examples/svgviewer/index.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ SVG Viewer Example
+
+
+
+
+
+
diff --git a/examples/svgviewer/viewer.js b/examples/svgviewer/viewer.js
new file mode 100644
index 000000000..54c9f7b2c
--- /dev/null
+++ b/examples/svgviewer/viewer.js
@@ -0,0 +1,55 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+
+//
+// See README for overview
+//
+
+'use strict';
+
+//
+// Fetch the PDF document from the URL using promises
+//
+PDFJS.getDocument('../../test/pdfs/liveprogramming.pdf').then(function(pdf) {
+ var numPages = pdf.numPages;
+ // Using promise to fetch the page
+
+ // For testing only.
+ var MAX_NUM_PAGES = 50;
+ var ii = Math.min(MAX_NUM_PAGES, numPages);
+
+ var promise = Promise.resolve();
+ for (var i = 1; i <= ii; i++) {
+ // Using promise to fetch the page
+ promise = promise.then(function (pageNum) {
+ return pdf.getPage(pageNum).then(function (page) {
+ var scale = 1.5;
+ var viewport = page.getViewport(scale);
+
+ var container = document.createElement('div');
+ container.id = 'pageContainer' + pageNum;
+ container.className = 'pageContainer';
+ container.style.width = viewport.width + 'px';
+ container.style.height = viewport.height + 'px';
+ document.body.appendChild(container);
+
+ var renderContext = {
+ viewport: viewport,
+ pageNum: pageNum,
+ container: container
+ };
+ // run rendering only when all pages are loaded
+ promise.then(function () {
+ page.getOperatorList().then(function (opList) {
+ var svgGfx = new SVGGraphics(page.commonObjs);
+ svgGfx.loadDependencies(opList).then(function (values) {
+ svgGfx.beginDrawing(renderContext.viewport, renderContext.pageNum,
+ renderContext.container, opList);
+ });
+ });
+ });
+ });
+ }.bind(null, i));
+ }
+});
+
diff --git a/src/display/svg.js b/src/display/svg.js
new file mode 100644
index 000000000..cf82dffc7
--- /dev/null
+++ b/src/display/svg.js
@@ -0,0 +1,695 @@
+/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
+/* Copyright 2012 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* globals PDFJS, FONT_IDENTITY_MATRIX, IDENTITY_MATRIX,
+ isNum, OPS, Promise, Util, warn */
+
+'use strict';
+
+function createScratchSVG(width, height) {
+ var NS = 'http://www.w3.org/2000/svg';
+ var svg = document.createElementNS(NS, 'svg:svg');
+ svg.setAttributeNS(null, 'version', '1.1');
+ svg.setAttributeNS(null, 'width', width + 'px');
+ svg.setAttributeNS(null, 'height', height + 'px');
+ svg.setAttributeNS(null, 'viewBox', '0 ' + (-height) + ' ' +
+ width + ' ' + height);
+ return svg;
+}
+
+var SVGExtraState = (function SVGExtraStateClosure() {
+ function SVGExtraState(old) {
+ // Are soft masks and alpha values shapes or opacities?
+ this.fontSize = 0;
+ this.fontSizeScale = 1;
+ this.textMatrix = IDENTITY_MATRIX;
+ this.fontMatrix = FONT_IDENTITY_MATRIX;
+ this.leading = 0;
+ // Current point (in user coordinates)
+ this.x = 0;
+ this.y = 0;
+ // Start of text line (in text coordinates)
+ this.lineX = 0;
+ this.lineY = 0;
+ // Character and word spacing
+ this.charSpacing = 0;
+ this.wordSpacing = 0;
+ this.textHScale = 1;
+ this.textRise = 0;
+ // Default fore and background colors
+ this.fillColor = '#000000';
+ this.strokeColor = '#000000';
+
+ this.fillAlpha = 1;
+ this.strokeAlpha = 1;
+ this.lineWidth = 1;
+ this.lineJoin = '';
+ this.lineCap = '';
+ this.miterLimit = 0;
+
+ // Dependency
+ this.dependencies = [];
+ this.count = 0;
+ }
+
+ SVGExtraState.prototype = {
+ clone: function SVGExtraState_clone() {
+ return Object.create(this);
+ },
+ setCurrentPoint: function SVGExtraState_setCurrentPoint(x, y) {
+ this.x = x;
+ this.y = y;
+ }
+ };
+ return SVGExtraState;
+})();
+
+function opListToTree(opList) {
+ var opTree = [];
+ var saveIdx = [];
+ var restIdx = [];
+ var tmp = [];
+ var items = [];
+ var opListLen = opList.length;
+
+ for (var x = 0; x < opListLen; x++) {
+ if (opList[x].fn === 'save') {
+ opTree.push({'fnId': 92, 'fn': 'group', 'items': []});
+ tmp.push(opTree);
+ opTree = opTree[opTree.length - 1].items;
+ continue;
+ }
+
+ if(opList[x].fn === 'restore') {
+ opTree = tmp.pop();
+ } else {
+ opTree.push(opList[x]);
+ }
+ }
+ return opTree;
+}
+
+
+var SVGGraphics = (function SVGGraphicsClosure(ctx) {
+ function SVGGraphics(commonObjs) {
+
+ this.current = new SVGExtraState();
+ this.transformMatrix = IDENTITY_MATRIX; // Graphics state matrix
+ this.transformStack = [];
+ this.extraStack = [];
+ this.commonObjs = commonObjs;
+ this.pendingEOFill = false;
+ }
+
+ var NS = 'http://www.w3.org/2000/svg';
+ var XML_NS = 'http://www.w3.org/XML/1998/namespace';
+ var LINE_CAP_STYLES = ['butt', 'round', 'square'];
+ var LINE_JOIN_STYLES = ['miter', 'round', 'bevel'];
+ var NORMAL_CLIP = {};
+ var EO_CLIP = {};
+
+ SVGGraphics.prototype = {
+ save: function SVGGraphics_save() {
+ this.transformStack.push(this.transformMatrix);
+ var old = this.current;
+ this.extraStack.push(old);
+ this.current = old.clone();
+ },
+
+ restore: function SVGGraphics_restore() {
+ this.transformMatrix = this.transformStack.pop();
+ this.current = this.extraStack.pop();
+ },
+
+ group: function SVGGraphics_group(items) {
+ this.save();
+ this.executeOpTree(items);
+ this.restore();
+ },
+
+ loadDependencies: function SVGGraphics_loadDependencies(operatorList) {
+ var fnArray = operatorList.fnArray;
+ var fnArrayLen = fnArray.length;
+ var argsArray = operatorList.argsArray;
+
+ var self = this;
+ for (var i = 0; i < fnArrayLen; i++) {
+ if (OPS.dependency == fnArray[i]) {
+ var deps = argsArray[i];
+ for (var n = 0, nn = deps.length; n < nn; n++) {
+ var obj = deps[n];
+ var common = obj.substring(0, 2) === 'g_';
+ if (common) {
+ var promise = new Promise(function(resolve) {
+ self.commonObjs.get(obj, resolve);
+ });
+ }
+ this.current.dependencies.push(promise);
+ }
+ }
+ }
+ return Promise.all(this.current.dependencies);
+ },
+
+ transform: function SVGGraphics_transform(a, b, c, d, e, f) {
+ var transformMatrix = [a, b, c, d, e, f];
+ this.transformMatrix = PDFJS.Util.transform(this.transformMatrix,
+ transformMatrix);
+
+ this.tgrp = document.createElementNS(NS, 'svg:g');
+ this.tgrp.setAttributeNS(null, 'id', 'transform');
+ this.tgrp.setAttributeNS(null, 'transform',
+ 'matrix(' + this.transformMatrix + ')');
+ this.pgrp.appendChild(this.tgrp);
+ },
+
+ beginDrawing: function SVGGraphics_beginDrawing(viewport, pageNum,
+ container, operatorList) {
+ this.svg = createScratchSVG(viewport.width, viewport.height);
+ this.container = container;
+ this.viewport = viewport;
+ this.transformMatrix = IDENTITY_MATRIX;
+ this.pgrp = document.createElementNS(NS, 'svg:g'); // Parent group
+ this.pgrp.setAttributeNS(null, 'transform', 'scale(' + viewport.scale +
+ ',' + -viewport.scale + ')');
+ this.tgrp = document.createElementNS(NS, 'svg:g'); // Transform group
+ this.tgrp.setAttributeNS(null, 'transform',
+ 'matrix(' + this.transformMatrix +')');
+ this.pgrp.appendChild(this.tgrp);
+ this.svg.appendChild(this.pgrp);
+ this.container.appendChild(this.svg);
+ this.convertOpList(operatorList);
+ },
+
+ convertOpList: function SVGGraphics_convertOpList(operatorList) {
+ var argsArray = operatorList.argsArray;
+ var fnArray = operatorList.fnArray;
+ var fnArrayLen = fnArray.length;
+ var argsArrayLen = argsArray.length;
+ var opTree = [];
+
+ var REVOPS = [];
+
+ for (var op in OPS) {
+ REVOPS[OPS[op]] = op;
+ }
+
+ var opList = [];
+ for (var x = 0; x < fnArrayLen; x++) {
+ var fnId = fnArray[x];
+ opList.push({'fnId' : fnId, 'fn': REVOPS[fnId], 'args': argsArray[x]});
+ }
+ opTree = opListToTree(opList);
+
+ this.executeOpTree(opTree);
+ return opTree;
+ },
+
+ executeOpTree: function SVGGraphics_executeOpTree(opTree) {
+ var opTreeLen = opTree.length;
+ for(var x = 0; x < opTreeLen; x++) {
+ var fn = opTree[x].fn;
+ var fnId = opTree[x].fnId;
+ var args = opTree[x].args;
+
+ switch (fnId | 0) {
+ case OPS.beginText:
+ this.beginText(args);
+ break;
+ case OPS.setLeading:
+ this.setLeading(args);
+ break;
+ case OPS.setLeadingMoveText:
+ this.setLeadingMoveText(args[0], args[1]);
+ break;
+ case OPS.setFont:
+ this.setFont(args);
+ break;
+ case OPS.showText:
+ this.showText(args[0]);
+ break;
+ case OPS.showSpacedText:
+ this.showText(args[0]);
+ break;
+ case OPS.endText:
+ this.endText(args);
+ break;
+ case OPS.moveText:
+ this.moveText(args[0], args[1]);
+ break;
+ case OPS.setCharSpacing:
+ this.setCharSpacing(args[0]);
+ break;
+ case OPS.setWordSpacing:
+ this.setWordSpacing(args[0]);
+ break;
+ case OPS.setTextMatrix:
+ this.setTextMatrix(args[0], args[1], args[2],
+ args[3], args[4], args[5]);
+ break;
+ case OPS.setLineWidth:
+ this.setLineWidth(args);
+ break;
+ case OPS.setLineJoin:
+ this.setLineJoin(args);
+ break;
+ case OPS.setLineCap:
+ this.setLineCap(args);
+ break;
+ case OPS.setMiterLimit:
+ this.setMiterLimit(args);
+ break;
+ case OPS.setFillRGBColor:
+ this.setFillRGBColor(args[0], args[1], args[2]);
+ break;
+ case OPS.setStrokeRGBColor:
+ this.setStrokeRGBColor(args[0], args[1], args[2]);
+ break;
+ case OPS.setDash:
+ this.setDash(args[0], args[1]);
+ break;
+ case OPS.setGState:
+ this.setGState(args);
+ break;
+ case OPS.fill:
+ this.fill();
+ break;
+ case OPS.eoFill:
+ this.eoFill();
+ break;
+ case OPS.stroke:
+ this.stroke();
+ break;
+ case OPS.fillStroke:
+ this.fillStroke();
+ break;
+ case OPS.closePath:
+ this.closePath();
+ break;
+ case OPS.closeStroke:
+ this.closeStroke();
+ break;
+ case OPS.closeFillStroke:
+ this.closeFillStroke();
+ break;
+ case OPS.nextLine:
+ this.nextLine();
+ break;
+ case OPS.transform:
+ this.transform(args[0], args[1], args[2], args[3],
+ args[4], args[5]);
+ break;
+ case OPS.constructPath:
+ this.constructPath(args[0], args[1]);
+ break;
+ case OPS.rectangle:
+ this.rectangle(args[0], args[1], args[2], args[3]);
+ break;
+ case 92:
+ this.group(opTree[x].items);
+ break;
+ default:
+ warn('Unimplemented Method '+ fn);
+ break;
+ }
+ }
+ },
+
+ setWordSpacing: function SVGGraphics_setWordSpacing(wordSpacing) {
+ this.current.wordSpacing = wordSpacing;
+ },
+
+ setCharSpacing: function SVGGraphics_setCharSpacing(charSpacing) {
+ this.current.charSpacing = charSpacing;
+ },
+
+ nextLine: function SVGGraphics_nextLine() {
+ this.moveText(0, this.current.leading);
+ },
+
+ setTextMatrix: function SVGGraphics_setTextMatrix(a, b, c, d, e, f) {
+ var current = this.current;
+ this.current.textMatrix = [a, b, c, d, e, f];
+ this.current.lineMatrix = [a, b, c, d, e, f];
+
+ this.current.x = this.current.lineX = 0;
+ this.current.y = this.current.lineY = 0;
+
+ current.xcoords = [];
+ current.tspan = document.createElementNS(NS, 'svg:tspan');
+ current.tspan.setAttributeNS(null, 'font-family', current.fontFamily);
+ current.tspan.setAttributeNS(null, 'font-size', current.fontSize);
+ current.tspan.setAttributeNS(null, 'y', -current.y);
+
+ current.txtElement = document.createElementNS(NS, 'svg:text');
+ current.txtElement.appendChild(current.tspan);
+ },
+
+ beginText: function SVGGraphics_beginText(args) {
+ this.current.x = this.current.lineX = 0;
+ this.current.y = this.current.lineY = 0;
+ this.current.textMatrix = IDENTITY_MATRIX;
+ this.current.lineMatrix = IDENTITY_MATRIX;
+ this.current.tspan = document.createElementNS(NS, 'svg:tspan');
+ this.current.txtElement = document.createElementNS(NS, 'svg:text');
+ this.current.txtgrp = document.createElementNS(NS, 'svg:g');
+ this.current.xcoords = [];
+ },
+
+ moveText: function SVGGraphics_moveText(x, y) {
+ var current = this.current;
+ this.current.x = this.current.lineX += x;
+ this.current.y = this.current.lineY += y;
+
+ current.xcoords = [];
+ current.tspan = document.createElementNS(NS, 'svg:tspan');
+ current.tspan.setAttributeNS(null, 'font-family', current.fontFamily);
+ current.tspan.setAttributeNS(null, 'font-size', current.fontSize);
+ current.tspan.setAttributeNS(null, 'y', -current.y);
+ },
+
+ showText: function SVGGraphics_showText(glyphs) {
+ this.save();
+ var current = this.current;
+ var font = current.font;
+ var fontSize = current.fontSize;
+
+ if (fontSize === 0) {
+ return;
+ }
+
+ var fontSizeScale = current.fontSizeScale;
+ var charSpacing = current.charSpacing;
+ var wordSpacing = current.wordSpacing;
+ var fontDirection = current.fontDirection;
+ var textHScale = current.textHScale * fontDirection;
+ var glyphsLength = glyphs.length;
+ var vertical = font.vertical;
+ var defaultVMetrics = font.defaultVMetrics;
+ var widthAdvanceScale = fontSize * current.fontMatrix[0];
+
+ var x = 0, i;
+ for (i = 0; i < glyphsLength; ++i) {
+ var glyph = glyphs[i];
+ if (glyph === null) {
+ // word break
+ x += fontDirection * wordSpacing;
+ continue;
+ } else if (isNum(glyph)) {
+ x += -glyph * fontSize * 0.001;
+ continue;
+ }
+ current.xcoords.push(current.x + x * textHScale);
+
+ var width = glyph.width;
+ var character = glyph.fontChar;
+ var charWidth = width * widthAdvanceScale + charSpacing * fontDirection;
+ x += charWidth;
+
+ current.tspan.textContent += character;
+ }
+ if (vertical) {
+ current.y -= x * textHScale;
+ } else {
+ current.x += x * textHScale;
+ }
+
+ current.tspan.setAttributeNS(null, 'x', current.xcoords.join(' '));
+ current.tspan.setAttributeNS(null, 'font-family', current.fontFamily);
+ current.tspan.setAttributeNS(null, 'font-size', current.fontSize);
+
+ current.txtElement.setAttributeNS(null, 'transform',
+ 'matrix(' + current.textMatrix + ') scale(1, -1)' );
+ current.txtElement.setAttributeNS(XML_NS, 'xml:space', 'preserve');
+ current.txtElement.appendChild(current.tspan);
+
+ current.txtgrp.setAttributeNS(null, 'id', 'text');
+ current.txtgrp.appendChild(current.txtElement);
+
+ this.tgrp.appendChild(current.txtElement);
+
+ this.restore();
+ },
+
+ setLeadingMoveText: function SVGGraphics_setLeadingMoveText(x, y) {
+ this.setLeading(-y);
+ this.moveText(x, y);
+ },
+
+ setFont: function SVGGraphics_setFont(details) {
+ var current = this.current;
+ var fontObj = this.commonObjs.get(details[0]);
+ var size = details[1];
+ this.current.font = fontObj;
+
+ current.fontMatrix = (fontObj.fontMatrix ?
+ fontObj.fontMatrix : FONT_IDENTITY_MATRIX);
+
+ var bold = fontObj.black ? (fontObj.bold ? 'bolder' : 'bold') :
+ (fontObj.bold ? 'bold' : 'normal');
+
+ var italic = fontObj.italic ? 'italic' : 'normal';
+
+ current.font.style = (bold == 'normal' ?
+ (italic == 'normal' ?
+ '' : 'font-weight:' + italic) :
+ 'font-weight:' + bold);
+
+ if (size < 0) {
+ size = -size;
+ current.fontDirection = -1;
+ } else {
+ current.fontDirection = 1;
+ }
+ current.fontSize = size;
+ current.fontFamily = fontObj.loadedName;
+ },
+
+ endText: function SVGGraphics_endText(args) {
+ // Empty for now. Not sure how to break showText into this.
+ },
+
+ // Path properties
+ setLineWidth: function SVGGraphics_setLineWidth(width) {
+ this.current.lineWidth = width;
+ },
+ setLineCap: function SVGGraphics_setLineCap(style) {
+ this.current.lineCap = LINE_CAP_STYLES[style];
+ },
+ setLineJoin: function SVGGraphics_setLineJoin(style) {
+ this.current.lineJoin = LINE_JOIN_STYLES[style];
+ },
+ setMiterLimit: function SVGGraphics_setMiterLimit(limit) {
+ this.current.miterLimit = limit;
+ },
+ setStrokeRGBColor: function SVGGraphics_setStrokeRGBColor(r, g, b) {
+ var color = Util.makeCssRgb(arguments);
+ this.current.strokeColor = color;
+ },
+ setFillRGBColor: function SVGGraphics_setFillRGBColor(r, g, b) {
+ var color = Util.makeCssRgb(arguments);
+ this.current.fillColor = color;
+ },
+ setDash: function SVGGraphics_setDash(dashArray, dashPhase) {
+ this.current.dashArray = dashArray;
+ this.current.dashPhase = dashPhase;
+ },
+
+ constructPath: function SVGGraphics_constructPath(ops, args) {
+ var current = this.current;
+ var x = current.x, y = current.y;
+ current.path = document.createElementNS(NS, 'svg:path');
+ var d = '';
+ var arr = [];
+ var opLength = ops.length;
+
+ for (var i = 0, j = 0; i < opLength; i++) {
+ switch (ops[i] | 0) {
+ case OPS.moveTo:
+ x = args[j++];
+ y = args[j++];
+ d += 'M' + x + ' ' + y;
+ break;
+ case OPS.lineTo:
+ x = args[j++];
+ y = args[j++];
+ d += 'L' + x + ' ' + y;
+ break;
+ case OPS.curveTo:
+ x = args[j + 4];
+ y = args[j + 5];
+ arr = [args[j], args[j + 1], args[j + 2], args[j + 3], x, y];
+ d += 'C ' + arr.join(' ');
+ j += 6;
+ break;
+ case OPS.curveTo2:
+ x = args[j + 2];
+ y = args[j + 3];
+ arr = [x, y, args[j], args[j + 1], args[j + 2], args[j + 3]];
+ d += 'C ' + arr.join(' ');
+ j += 4;
+ break;
+ case OPS.curveTo3:
+ x = args[j + 2];
+ y = args[j + 3];
+ arr = [args[j], args[j + 1], x, y, x, y];
+ d += 'C ' + arr.join(' ');
+ j += 4;
+ break;
+ case OPS.closePath:
+ d += 'Z';
+ break;
+ }
+ }
+ current.path.setAttributeNS(null, 'd', d);
+ current.path.setAttributeNS(null, 'stroke-miterlimit',
+ current.miterLimit);
+ current.path.setAttributeNS(null, 'stroke-linecap', current.lineCap);
+ current.path.setAttributeNS(null, 'stroke-width', current.lineWidth);
+ current.path.setAttributeNS(null, 'stroke-dasharray', current.dashArray);
+ current.path.setAttributeNS(null, 'stroke-dashoffset', current.dashPhase);
+ this.tgrp.appendChild(current.path);
+ // Saving a reference in current.element so that it can be addressed
+ // in 'fill' and 'stroke'
+ current.element = current.path;
+ current.setCurrentPoint(x, y);
+ },
+
+ closePath: function SVGGraphics_closePath() {
+ var current = this.current;
+ var d = current.path.getAttributeNS(null, 'd');
+ d += 'Z';
+ current.path.setAttributeNS(null, 'd', d);
+ },
+
+ setLeading: function SVGGraphics_setLeading(leading) {
+ this.current.leading = -leading;
+ },
+
+ setTextRise: function SVGGraphics_setTextRise(textRise) {
+ this.current.textRise = textRise;
+ },
+
+ setHScale: function SVGGraphics_setHScale(scale) {
+ this.current.textHScale = scale / 100;
+ },
+
+ setGState: function SVGGraphics_setGState(states) {
+ for (var i = 0, ii = states.length; i < ii; i++) {
+ var state = states[i];
+ var key = state[0];
+ var value = state[1];
+
+ switch (key) {
+ case 'LW':
+ this.setLineWidth(value);
+ break;
+ case 'LC':
+ this.setLineCap(value);
+ break;
+ case 'LJ':
+ this.setLineJoin(value);
+ break;
+ case 'ML':
+ this.setMiterLimit(value);
+ break;
+ case 'D':
+ this.setDash(value[0], value[1]);
+ break;
+ case 'RI':
+ break;
+ case 'FL':
+ break;
+ case 'Font':
+ this.setFont(value[0], value[1]);
+ break;
+ case 'CA':
+ break;
+ case 'ca':
+ break;
+ case 'BM':
+ break;
+ case 'SMask':
+ break;
+ }
+ }
+ },
+
+ fill: function SVGGraphics_fill() {
+ this.save();
+ var current = this.current;
+ current.element.setAttributeNS(null, 'fill', current.fillColor);
+ this.tgrp.appendChild(current.element);
+ this.restore();
+ },
+
+ stroke: function SVGGraphics_stroke() {
+ this.save();
+ var current = this.current;
+ current.element.setAttributeNS(null, 'stroke', current.strokeColor);
+ current.element.setAttributeNS(null, 'fill', 'none');
+ this.tgrp.appendChild(current.element);
+ this.restore();
+ },
+
+ eoFill: function SVGGraphics_eoFill() {
+ this.save();
+ var current = this.current;
+ current.element.setAttributeNS(null, 'fill', current.fillColor);
+ current.element.setAttributeNS(null, 'fill-rule', 'evenodd');
+ this.restore();
+ },
+
+ fillStroke: function SVGGraphics_fillStroke() {
+ this.fill();
+ this.stroke();
+ },
+
+ closeStroke: function SVGGraphics_closeStroke() {
+ this.closePath();
+ this.stroke();
+ },
+
+ closeFillStroke: function SVGGraphics_closeFillStroke() {
+ this.closePath();
+ this.fillStroke();
+ },
+
+ rectangle: function SVGGraphics_rectangle(x, y, width, height) {
+ this.save();
+ var current = this.current;
+ if (width < 0) {
+ x = x + width;
+ width = -width;
+ }
+ if (height < 0) {
+ y = y + height;
+ height = -height;
+ }
+ current.rect = document.createElementNS(NS, 'svg:rect');
+ current.rect.setAttributeNS(null, 'x', x);
+ current.rect.setAttributeNS(null, 'y', y);
+ current.rect.setAttributeNS(null, 'fill', 'none');
+ current.rect.setAttributeNS(null, 'width', width);
+ current.rect.setAttributeNS(null, 'height', height);
+ current.rect.setAttributeNS(null, 'stroke-width', current.lineWidth);
+ // Saving a reference in current.element so that it can be addressed
+ // in 'fill' or 'stroke'
+ current.element = current.rect;
+ },
+ };
+ return SVGGraphics;
+})();