From 426fc454de146730afb7d4c57452930027bfe228 Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Sat, 15 Oct 2016 21:05:57 +0200 Subject: [PATCH] SVG: factor out initialization code into a private method Each well-formed SVG image has the following structure: SVG element - Definitions element - Root group - Other group 1 - ... - Other group n This patch factors out initialization code into a private method in such as way that the creation of this structure is clear from the code. The root group is the replacement for the parent group from before. We need this group as we cannot apply the viewport transform on the SVG element itself (this caused issues in Chrome). If other code appends groups to the SVG image, in reality it is appending those groups to the root group, but this detail is abstracted away by this patch. --- src/display/svg.js | 48 +++++++++++++++++++++++++++++++--------------- 1 file changed, 33 insertions(+), 15 deletions(-) diff --git a/src/display/svg.js b/src/display/svg.js index 3fa536cf7..ddb5caef9 100644 --- a/src/display/svg.js +++ b/src/display/svg.js @@ -293,16 +293,6 @@ var SVGExtraState = (function SVGExtraStateClosure() { })(); var SVGGraphics = (function SVGGraphicsClosure() { - 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 0 ' + width + ' ' + height); - return svg; - } - function opListToTree(opList) { var opTree = []; var tmp = []; @@ -455,17 +445,14 @@ var SVGGraphics = (function SVGGraphicsClosure() { }, getSVG: function SVGGraphics_getSVG(operatorList, viewport) { - this.svg = createScratchSVG(viewport.width, viewport.height); this.viewport = viewport; + var svgElement = this._initialize(viewport); return this.loadDependencies(operatorList).then(function () { this.transformMatrix = IDENTITY_MATRIX; - this.defs = document.createElementNS(NS, 'svg:defs'); - this.svg.setAttributeNS(null, 'transform', pm(viewport.transform)); - this.svg.appendChild(this.defs); var opTree = this.convertOpList(operatorList); this.executeOpTree(opTree); - return this.svg; + return svgElement; }.bind(this)); }, @@ -1145,6 +1132,37 @@ var SVGGraphics = (function SVGGraphicsClosure() { paintFormXObjectEnd: function SVGGraphics_paintFormXObjectEnd() {}, + /** + * @private + */ + _initialize: function SVGGraphics_initialize(viewport) { + // Create the SVG element. + var svg = document.createElementNS(NS, 'svg:svg'); + svg.setAttributeNS(null, 'version', '1.1'); + svg.setAttributeNS(null, 'width', viewport.width + 'px'); + svg.setAttributeNS(null, 'height', viewport.height + 'px'); + svg.setAttributeNS(null, 'viewBox', '0 0 ' + viewport.width + + ' ' + viewport.height); + + // Create the definitions element. + var definitions = document.createElementNS(NS, 'svg:defs'); + svg.appendChild(definitions); + this.defs = definitions; + + // Create the root group element, which acts a container for all other + // groups and applies the viewport transform. + var rootGroup = document.createElementNS(NS, 'svg:g'); + rootGroup.setAttributeNS(null, 'transform', pm(viewport.transform)); + svg.appendChild(rootGroup); + + // For the construction of the SVG image we are only interested in the + // root group, so we expose it as the entry point of the SVG image for + // the other code in this class. + this.svg = rootGroup; + + return svg; + }, + /** * @private */