fix(convertPathData): skip if transform overridden in styles (#1830)

svg · Nov 12, 2023 · 1f766ac · 1f766ac
1 parent 14bdacc
commit 1f766ac
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 23 deletions.
diff --git a/lib/stringifier.js b/lib/stringifier.js
@@ -33,9 +33,7 @@ const encodeEntity = (char) => {
   return entities[char];
 };
 
-/**
- * @type {Options}
- */
+/** @type {Options} */
 const defaults = {
   doctypeStart: '<!DOCTYPE',
   doctypeEnd: '>',
@@ -58,16 +56,14 @@ const defaults = {
   indent: 4,
   regEntities: /[&'"<>]/g,
   regValEntities: /[&"<>]/g,
-  encodeEntity: encodeEntity,
+  encodeEntity,
   pretty: false,
   useShortTags: true,
   eol: 'lf',
   finalNewline: false,
 };
 
-/**
- * @type {Record<string, string>}
- */
+/** @type {Record<string, string>} */
 const entities = {
   '&': '&amp;',
   "'": '&apos;',
@@ -113,7 +109,7 @@ const stringifySvg = (data, userOptions = {}) => {
     config.textEnd += eol;
   }
   let svg = stringifyNode(data, config, state);
-  if (config.finalNewline && svg.length > 0 && svg[svg.length - 1] !== '\n') {
+  if (config.finalNewline && svg.length > 0 && !svg.endsWith('\n')) {
     svg += eol;
   }
   return svg;

diff --git a/lib/svgo/tools.js b/lib/svgo/tools.js
@@ -176,3 +176,18 @@ const hasScripts = (node) => {
   return eventAttrs.some((attr) => node.attributes[attr] != null);
 };
 exports.hasScripts = hasScripts;
+
+/**
+ * For example, a string that contains one or more of following would match and
+ * return true:
+ *
+ * * `url(#gradient001)`
+ * * `url('#gradient001')`
+ *
+ * @param {string} body
+ * @returns {boolean} If the given string includes a URL reference.
+ */
+const includesUrlReference = (body) => {
+  return /\burl\((["'])?#(.+?)\1\)/g.test(body);
+};
+exports.includesUrlReference = includesUrlReference;
diff --git a/plugins/applyTransforms.js b/plugins/applyTransforms.js
@@ -12,7 +12,10 @@ const {
   transformArc,
 } = require('./_transforms.js');
 const { path2js } = require('./_path.js');
-const { removeLeadingZero } = require('../lib/svgo/tools.js');
+const {
+  removeLeadingZero,
+  includesUrlReference,
+} = require('../lib/svgo/tools.js');
 const { referencesProps, attrsGroupsDefaults } = require('./_collections.js');
 
 /**
@@ -35,9 +38,6 @@ const applyTransforms = (root, params) => {
   return {
     element: {
       enter: (node) => {
-        const computedStyle = computeStyle(stylesheet, node);
-
-        // used only for paths for now
         if (node.attributes.d == null) {
           return;
         }
@@ -48,7 +48,7 @@ const applyTransforms = (root, params) => {
         }
 
         // if there are no 'stroke' attr and references to other objects such as
-        // gradiends or clip-path which are also subjects to transform.
+        // gradients or clip-path which are also subjects to transform.
         if (
           node.attributes.transform == null ||
           node.attributes.transform === '' ||
@@ -57,32 +57,41 @@ const applyTransforms = (root, params) => {
           node.attributes.style != null ||
           Object.entries(node.attributes).some(
             ([name, value]) =>
-              referencesProps.includes(name) && value.includes('url(')
+              referencesProps.includes(name) && includesUrlReference(value)
           )
         ) {
           return;
         }
 
+        const computedStyle = computeStyle(stylesheet, node);
+        const transformStyle = computedStyle.transform;
+
+        // Transform overridden in <style> tag which is not considered
+        if (
+          transformStyle.type === 'static' &&
+          transformStyle.value !== node.attributes.transform
+        ) {
+          return;
+        }
+
         const matrix = transformsMultiply(
           transform2js(node.attributes.transform)
         );
+
         const stroke =
-          computedStyle.stroke != null && computedStyle.stroke.type === 'static'
+          computedStyle.stroke?.type === 'static'
             ? computedStyle.stroke.value
             : null;
 
         const strokeWidth =
-          computedStyle['stroke-width'] != null &&
-          computedStyle['stroke-width'].type === 'static'
+          computedStyle['stroke-width']?.type === 'static'
             ? computedStyle['stroke-width'].value
             : null;
         const transformPrecision = params.transformPrecision;
 
         if (
-          (computedStyle.stroke != null &&
-            computedStyle.stroke.type === 'dynamic') ||
-          (computedStyle.strokeWidth != null &&
-            computedStyle['stroke-width'].type === 'dynamic')
+          computedStyle.stroke?.type === 'dynamic' ||
+          computedStyle['stroke-width']?.type === 'dynamic'
         ) {
           return;
         }
@@ -94,7 +103,7 @@ const applyTransforms = (root, params) => {
         );
 
         if (stroke && stroke != 'none') {
-          if (params.applyTransformsStroked === false) {
+          if (!params.applyTransformsStroked) {
             return;
           }
 

diff --git a/plugins/moveGroupAttrsToElems.js b/plugins/moveGroupAttrsToElems.js
@@ -1,6 +1,7 @@
 'use strict';
 
 const { pathElems, referencesProps } = require('./_collections.js');
+const { includesUrlReference } = require('../lib/svgo/tools.js');
 
 exports.name = 'moveGroupAttrsToElems';
 exports.description = 'moves some group attributes to the content elements';
@@ -36,7 +37,7 @@ exports.fn = () => {
           node.attributes.transform != null &&
           Object.entries(node.attributes).some(
             ([name, value]) =>
-              referencesProps.includes(name) && value.includes('url(')
+              referencesProps.includes(name) && includesUrlReference(value)
           ) === false &&
           node.children.every(
             (child) =>