Transform gradients in strokes

Author: adroitwhiz

src/transform-applier.js

@@ -505,14 +505,42 @@ const _parseUrl = (value, windowRef) => {
  */
 const transformStrokeWidths = function (svgTag, windowRef, bboxForTesting) {
     const inherited = Matrix.identity();
-    const applyTransforms = (element, matrix, strokeWidth, fill) => {
+
+    const makeTransformedGradient = (gradientId, element, matrix) => {
+        const doc = windowRef.document;
+        // Need path bounds to transform gradient
+        const svgSpot = doc.createElement('span');
+        let bbox;
+        if (bboxForTesting) {
+            bbox = bboxForTesting;
+        } else {
+            try {
+                doc.body.appendChild(svgSpot);
+                const svg = SvgElement.set(windowRef.document.createElementNS(SvgElement.svg, 'svg'));
+                const path = SvgElement.set(windowRef.document.createElementNS(SvgElement.svg, 'path'));
+                path.setAttribute('d', element.attributes.d.value);
+                svg.appendChild(path);
+                svgSpot.appendChild(svg);
+                // Take the bounding box.
+                bbox = svg.getBBox();
+            } finally {
+                // Always destroy the element, even if, for example, getBBox throws.
+                doc.body.removeChild(svgSpot);
+            }
+        }
+
+        return _createGradient(gradientId, svgTag, bbox, matrix);
+    };
+
+    const applyTransforms = (element, matrix, strokeWidth, fill, stroke) => {
         if (_isContainerElement(element)) {
             // Push fills and stroke width down to leaves
             if (element.attributes['stroke-width']) {
                 strokeWidth = element.attributes['stroke-width'].value;
             }
-            if (element.attributes && element.attributes.fill) {
-                fill = element.attributes.fill.value;
+            if (element.attributes) {
+                if (element.attributes.fill) fill = element.attributes.fill.value;
+                if (element.attributes.stroke) stroke = element.attributes.stroke.value;
             }
 
             // If any child nodes don't take attributes, leave the attributes
@@ -522,56 +550,42 @@ const transformStrokeWidths = function (svgTag, windowRef, bboxForTesting) {
                     element.childNodes[i],
                     Matrix.compose(matrix, _parseTransform(element)),
                     strokeWidth,
-                    fill
+                    fill,
+                    stroke
                 );
             }
             element.removeAttribute('transform');
             element.removeAttribute('stroke-width');
             element.removeAttribute('fill');
+            element.removeAttribute('stroke');
         } else if (_isPathWithTransformAndStroke(element, strokeWidth)) {
             if (element.attributes['stroke-width']) {
                 strokeWidth = element.attributes['stroke-width'].value;
             }
-            if (element.attributes.fill) {
-                fill = element.attributes.fill.value;
-            }
+            if (element.attributes.fill) fill = element.attributes.fill.value;
+            if (element.attributes.stroke) stroke = element.attributes.stroke.value;
             matrix = Matrix.compose(matrix, _parseTransform(element));
             if (Matrix.toString(matrix) === Matrix.toString(Matrix.identity())) {
                 element.removeAttribute('transform');
                 element.setAttribute('stroke-width', strokeWidth);
                 if (fill) element.setAttribute('fill', fill);
+                if (stroke) element.setAttribute('stroke', stroke);
                 return;
             }
 
             // Transform gradient
-            const gradientId = _parseUrl(fill, windowRef);
-            if (gradientId) {
-                const doc = windowRef.document;
-                // Need path bounds to transform gradient
-                const svgSpot = doc.createElement('span');
-                let bbox;
-                if (bboxForTesting) {
-                    bbox = bboxForTesting;
-                } else {
-                    try {
-                        doc.body.appendChild(svgSpot);
-                        const svg = SvgElement.set(windowRef.document.createElementNS(SvgElement.svg, 'svg'));
-                        const path = SvgElement.set(windowRef.document.createElementNS(SvgElement.svg, 'path'));
-                        path.setAttribute('d', element.attributes.d.value);
-                        svg.appendChild(path);
-                        svgSpot.appendChild(svg);
-                        // Take the bounding box.
-                        bbox = svg.getBBox();
-                    } finally {
-                        // Always destroy the element, even if, for example, getBBox throws.
-                        doc.body.removeChild(svgSpot);
-                    }
-                }
-
-                const newRef = _createGradient(gradientId, svgTag, bbox, matrix);
+            const fillGradientId = _parseUrl(fill, windowRef);
+            if (fillGradientId) {
+                const newRef = makeTransformedGradient(fillGradientId, element, matrix);
                 if (newRef) fill = newRef;
             }
 
+            const strokeGradientId = _parseUrl(stroke, windowRef);
+            if (strokeGradientId) {
+                const newRef = makeTransformedGradient(strokeGradientId, element, matrix);
+                if (newRef) stroke = newRef;
+            }
+
             // Transform path data
             element.setAttribute('d', _transformPath(element.attributes.d.value, matrix));
             element.removeAttribute('transform');
@@ -580,14 +594,18 @@ const transformStrokeWidths = function (svgTag, windowRef, bboxForTesting) {
             const matrixScale = _getScaleFactor(matrix);
             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)) {
-            // Push stroke width and fill down to leaves
+            // Push stroke width, fill, and stroke down to leaves
             if (strokeWidth && !element.attributes['stroke-width']) {
                 element.setAttribute('stroke-width', strokeWidth);
             }
             if (fill && !element.attributes.fill) {
                 element.setAttribute('fill', fill);
             }
+            if (stroke && !element.attributes.stroke) {
+                element.setAttribute('stroke', stroke);
+            }
 
             // Push transform down to leaves
             matrix = Matrix.compose(matrix, _parseTransform(element));