Move element categories into own file+correct them

Instead of checking if an element is a graphics element,
check if it's "paintable" (fill/stroke applies to it).

This includes several text-related elements,
and excludes `use` and `image` elements.

Author: adroitwhiz

src/element-categories.js

@@ -0,0 +1,30 @@
+// Elements that can have paint attributes (e.g. fill and stroke)
+// Per the SVG spec, things like fill and stroke apply to shapes and text content elements
+// https://www.w3.org/TR/SVG11/painting.html#FillProperty
+// https://www.w3.org/TR/SVG11/painting.html#StrokeProperty
+const PAINTABLE_ELEMENTS = new Set([
+    // Shape elements (https://www.w3.org/TR/SVG11/intro.html#TermShape)
+    'path', 'rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon',
+    // Text content elements (https://www.w3.org/TR/SVG11/intro.html#TermTextContentElement)
+    // The actual tag names are `altGlyph` and `textPath`, but we're lowercasing the tag name in isContainerElement,
+    // so they should be lowercased here too.
+    'altglyph', 'textpath', 'text', 'tref', 'tspan'
+]);
+
+// "An element which can have graphics elements and other container elements as child elements."
+// https://www.w3.org/TR/SVG11/intro.html#TermContainerElement
+const CONTAINER_ELEMENTS = new Set([
+    'a', 'defs', 'g', 'marker', 'glyph', 'missing-glyph', 'pattern', 'svg', 'switch', 'symbol'
+]);
+
+const isPaintableElement = function (element) {
+    return element.tagName && PAINTABLE_ELEMENTS.has(element.tagName.toLowerCase());
+};
+const isContainerElement = function (element) {
+    return element.tagName && CONTAINER_ELEMENTS.has(element.tagName.toLowerCase());
+};
+
+module.exports = {
+    isPaintableElement,
+    isContainerElement
+};

src/transform-applier.js

@@ -1,5 +1,6 @@
 const Matrix = require('transformation-matrix');
 const SvgElement = require('./svg-element');
+const {isPaintableElement, isContainerElement} = require('./element-categories');
 const log = require('./util/log');
 
 /**
@@ -288,14 +289,6 @@ const _transformPath = function (pathString, transform) {
     return result;
 };
 
-const GRAPHICS_ELEMENTS = ['circle', 'ellipse', 'image', 'line', 'path', 'polygon', 'polyline', 'rect', 'text', 'use'];
-const CONTAINER_ELEMENTS = ['a', 'defs', 'g', 'marker', 'glyph', 'missing-glyph', 'pattern', 'svg', 'switch', 'symbol'];
-const _isContainerElement = function (element) {
-    return element.tagName && CONTAINER_ELEMENTS.includes(element.tagName.toLowerCase());
-};
-const _isGraphicsElement = function (element) {
-    return element.tagName && GRAPHICS_ELEMENTS.includes(element.tagName.toLowerCase());
-};
 const _isPathWithTransformAndStroke = function (element, strokeWidth) {
     if (!element.attributes) return false;
     strokeWidth = element.attributes['stroke-width'] ?
@@ -514,7 +507,7 @@ const transformStrokeWidths = function (svgTag, windowRef, bboxForTesting) {
     const inherited = Matrix.identity();
 
     const applyTransforms = (element, matrix, strokeWidth, fill, stroke) => {
-        if (_isContainerElement(element)) {
+        if (isContainerElement(element)) {
             // Push fills and stroke width down to leaves
             if (element.attributes['stroke-width']) {
                 strokeWidth = element.attributes['stroke-width'].value;
@@ -601,7 +594,7 @@ const transformStrokeWidths = function (svgTag, windowRef, bboxForTesting) {
             element.setAttribute('stroke-width', _quadraticMean(matrixScale.x, matrixScale.y) * strokeWidth);
             if (fill) element.setAttribute('fill', fill);
             if (stroke) element.setAttribute('stroke', stroke);
-        } else if (_isGraphicsElement(element)) {
+        } else if (isPaintableElement(element)) {
             // Push stroke width, fill, and stroke down to leaves
             if (strokeWidth && !element.attributes['stroke-width']) {
                 element.setAttribute('stroke-width', strokeWidth);