shorten SVG inline syntax

lindell · Feb 25, 2024 · 0de7076 · 0de7076
1 parent 5ed2a2b
commit 0de7076
Showing 1 changed file with 43 additions and 55 deletions.
diff --git a/src/renderers/svg.js b/src/renderers/svg.js
@@ -20,8 +20,7 @@ class SVGRenderer{
 			var encodingOptions = merge(this.options, encoding.options);
 
 			var group = this.createGroup(currentX, encodingOptions.marginTop, this.svg);
-
-			this.setGroupOptions(group, encodingOptions);
+			group.setAttribute("fill", encodingOptions.lineColor);
 
 			this.drawSvgBarcode(group, encodingOptions, encoding);
 			this.drawSVGText(group, encodingOptions, encoding);
@@ -32,7 +31,7 @@ class SVGRenderer{
 
 	prepareSVG(){
 		// Clear the SVG
-		while (this.svg.firstChild) {
+		while (this.svg.firstChild){
 			this.svg.removeChild(this.svg.firstChild);
 		}
 
@@ -44,9 +43,7 @@ class SVGRenderer{
 		this.setSvgAttributes(width, maxHeight);
 
 		if(this.options.background){
-			this.drawRect(0, 0, width, maxHeight, this.svg).setAttribute(
-				"style", "fill:" + this.options.background + ";"
-			);
+			this.drawRect(0, 0, "100%", "100%", this.svg).setAttribute("fill", this.options.background);
 		}
 	}
 
@@ -83,82 +80,73 @@ class SVGRenderer{
 	}
 
 	drawSVGText(parent, options, encoding){
-		var textElem = this.document.createElementNS(svgns, 'text');
-
 		// Draw the text if displayValue is set
-		if(options.displayValue){
-			var x, y;
+		if(!options.displayValue){
+			return;
+		}
 
-			textElem.setAttribute("style",
-				"font:" + options.fontOptions + " " + options.fontSize + "px " + options.font
-			);
+		var textElem = this.document.createElementNS(svgns, 'text');
+		var x, y;
 
-			if(options.textPosition == "top"){
-				y = options.fontSize - options.textMargin;
-			}
-			else{
-				y = options.height + options.textMargin + options.fontSize;
-			}
+		if(options.textPosition == "top"){
+			y = options.fontSize - options.textMargin;
+		}
+		else{
+			y = options.height + options.textMargin + options.fontSize;
+		}
 
-			// Draw the text in the correct X depending on the textAlign option
-			if(options.textAlign == "left" || encoding.barcodePadding > 0){
-				x = 0;
-				textElem.setAttribute("text-anchor", "start");
-			}
-			else if(options.textAlign == "right"){
-				x = encoding.width - 1;
-				textElem.setAttribute("text-anchor", "end");
-			}
-			// In all other cases, center the text
-			else{
-				x = encoding.width / 2;
-				textElem.setAttribute("text-anchor", "middle");
-			}
+		// Draw the text in the correct X depending on the textAlign option
+		if(options.textAlign == "left" || encoding.barcodePadding > 0){
+			x = 0;
+			textElem.setAttribute("text-anchor", "start");
+		}
+		else if(options.textAlign == "right"){
+			x = encoding.width - 1;
+			textElem.setAttribute("text-anchor", "end");
+		}
+		// In all other cases, center the text
+		else{
+			x = encoding.width / 2;
+			textElem.setAttribute("text-anchor", "middle");
+		}
+
+		textElem.setAttribute("x", x);
+		textElem.setAttribute("y", y);
 
-			textElem.setAttribute("x", x);
-			textElem.setAttribute("y", y);
+		textElem.setAttribute("style", "font:" +
+			trim(options.fontOptions + " " + options.fontSize + "px " + options.font)
+		);
 
-			textElem.appendChild(this.document.createTextNode(encoding.text));
+		textElem.appendChild(this.document.createTextNode(encoding.text));
 
-			parent.appendChild(textElem);
-		}
+		parent.appendChild(textElem);
 	}
 
 
 	setSvgAttributes(width, height){
 		var svg = this.svg;
-		svg.setAttribute("width", width + "px");
-		svg.setAttribute("height", height + "px");
-		svg.setAttribute("x", "0px");
-		svg.setAttribute("y", "0px");
-		svg.setAttribute("viewBox", "0 0 " + width + " " + height);
-
 		svg.setAttribute("xmlns", svgns);
-		svg.setAttribute("version", "1.1");
+		svg.setAttribute("viewBox", "0 0 " + width + " " + height);
 
-		svg.setAttribute("style", "transform: translate(0,0)");
+		rect.setAttribute("width", width);
+		rect.setAttribute("height", height);
 	}
 
 	createGroup(x, y, parent){
 		var group = this.document.createElementNS(svgns, 'g');
-		group.setAttribute("transform", "translate(" + x + ", " + y + ")");
+		group.setAttribute("transform", "translate(" + x + "," + y + ")");
 
 		parent.appendChild(group);
 
 		return group;
 	}
 
-	setGroupOptions(group, options){
-		group.setAttribute("style",
-			"fill:" + options.lineColor + ";"
-		);
-	}
-
 	drawRect(x, y, width, height, parent){
 		var rect = this.document.createElementNS(svgns, 'rect');
 
-		rect.setAttribute("x", x);
-		rect.setAttribute("y", y);
+		if(x) rect.setAttribute("x", x);
+		if(y) rect.setAttribute("y", y);
+
 		rect.setAttribute("width", width);
 		rect.setAttribute("height", height);