move or just leave transform attr from Group to the inner Path Elems (close #86)

.svgo.yml

@@ -103,6 +103,14 @@ plugins:
       tspan: true
       tref: true
 
+  - name: moveElemsAttrsToGroup
+    active: true
+    type: perItemReverse
+
+  - name: moveGroupAttrsToElems
+    active: true
+    type: perItemReverse
+
   - name: convertPathData
     active: true
     type: perItem
@@ -117,10 +125,6 @@ plugins:
       leadingZero: true
       negativeExtraSpace: true
 
-  - name: moveElemsAttrsToGroup
-    active: true
-    type: perItemReverse
-
   - name: convertTransform
     active: true
     type: perItem

plugins/_collections.js

@@ -13,6 +13,8 @@ exports.elemsGroups = {
     filterPrimitive: ['feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feFlood', 'feGaussianBlur', 'feImage', 'feMerge', 'feMorphology', 'feOffset', 'feSpecularLighting', 'feTile', 'feTurbulence']
 };
 
+exports.pathElems = ['path', 'glyph', 'missing-glyph'];
+
 // var defaults = exports.defaults = {
 //     'externalResourcesRequired': 'false',
 //     'xlink:type': 'simple'

plugins/convertPathData.js

@@ -3,7 +3,7 @@
 var cleanupOutData = require('../lib/svgo/tools').cleanupOutData,
     regPathInstructions = /([MmLlHhVvCcSsQqTtAaZz])\s*/,
     regPathData = /[\-+]?\d*\.?\d+([eE][\-+]?\d+)?/g,
-    pathElems = ['path', 'glyph', 'missing-glyph'],
+    pathElems = require('./_collections.js').pathElems,
     hasMarkerMid,
     transform2js = require('./_transforms.js').transform2js,
     transformsMultiply = require('./_transforms.js').transformsMultiply;

plugins/moveElemsAttrsToGroup.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var inheritableAttrs = require('./_collections').inheritableAttrs;
+var inheritableAttrs = require('./_collections').inheritableAttrs,
+    pathElems = require('./_collections.js').pathElems;
 
 /**
  * Collapse content's intersected and inheritable
@@ -32,34 +33,47 @@ exports.moveElemsAttrsToGroup = function(item) {
 
         var intersection = {},
             hasTransform = false,
-            every = item.content.every(function(g) {
+            intersected = item.content.every(function(inner) {
-                if (g.elem && g.attrs) {
+                if (inner.isElem() && inner.hasAttr()) {
                     if (!Object.keys(intersection).length) {
-                        intersection = g.attrs;
+                        intersection = inner.attrs;
                     } else {
-                        intersection = intersectInheritableAttrs(intersection, g.attrs);
+                        intersection = intersectInheritableAttrs(intersection, inner.attrs);
 
                         if (!intersection) return false;
                     }
 
                     return true;
                 }
+            }),
+            allPath = item.content.every(function(inner) {
+                return inner.isElem(pathElems);
             });
 
-        if (every) {
+        if (intersected) {
 
             item.content.forEach(function(g) {
 
                 for (var name in intersection) {
-                    g.removeAttr(name);
 
-                    if (name === 'transform') {
+                    if (!allPath || name !== 'transform') {
-                        if (!hasTransform && item.hasAttr('transform')) {
+
-                            item.attr('transform').value += ' ' + intersection[name].value;
+                        g.removeAttr(name);
-                            hasTransform = true;
+
+                        if (name === 'transform') {
+                            if (!hasTransform) {
+                                if (item.hasAttr('transform')) {
+                                    item.attr('transform').value += ' ' + intersection[name].value;
+                                } else {
+                                    item.addAttr(intersection[name]);
+                                }
+
+                                hasTransform = true;
+                            }
+                        } else {
+                            item.addAttr(intersection[name]);
                         }
-                    } else {
+
-                        item.addAttr(intersection[name]);
                     }
                 }
 

plugins/moveGroupAttrsToElems.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var pathElems = require('./_collections.js').pathElems;
+
+/**
+ * Move group attrs to the content elements.
+ *
+ * @example
+ * <g transform="scale(2)">
+ *     <path transform="rotate(45)" d="M0,0 L10,20"/>
+ *     <path transform="translate(10, 20)" d="M0,10 L20,30"/>
+ * </g>
+ *                          ⬇
+ * <g>
+ *     <path transform="scale(2) rotate(45)" d="M0,0 L10,20"/>
+ *     <path transform="scale(2) translate(10, 20)" d="M0,10 L20,30"/>
+ * </g>
+ *
+ * @param {Object} item current iteration item
+ * @return {Boolean} if false, item will be filtered out
+ *
+ * @author Kir Belevich
+ */
+exports.moveGroupAttrsToElems = function(item) {
+
+    // move group transform attr to content's pathElems
+    if (
+        item.isElem('g') &&
+        item.hasAttr('transform') &&
+        !item.isEmpty() &&
+        item.content.every(function(inner) {
+            return inner.isElem(pathElems);
+        })
+    ) {
+        item.content.forEach(function(inner) {
+            if (inner.hasAttr('transform')) {
+                inner.attr('transform').value = item.attr('transform').value + ' ' + inner.attr('transform').value;
+            } else {
+                inner.addAttr(item.attr('transform'));
+            }
+        });
+
+        item.removeAttr('transform');
+    }
+
+};

test/plugins/moveElemsAttrsToGroup.06.orig.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <g>
+        <path transform="scale(2)" d="M0,0 L10,20"/>
+        <path transform="scale(2)" d="M0,10 L20,30"/>
+    </g>
+</svg>

test/plugins/moveElemsAttrsToGroup.06.should.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <g>
+        <path transform="scale(2)" d="M0,0 L10,20"/>
+        <path transform="scale(2)" d="M0,10 L20,30"/>
+    </g>
+</svg>

test/plugins/moveGroupAttrsToElems.01.orig.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <g transform="scale(2)">
+        <path transform="rotate(45)" d="M0,0 L10,20"/>
+        <path transform="translate(10, 20)" d="M0,10 L20,30"/>
+    </g>
+</svg>

test/plugins/moveGroupAttrsToElems.01.should.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <g>
+        <path transform="scale(2) rotate(45)" d="M0,0 L10,20"/>
+        <path transform="scale(2) translate(10, 20)" d="M0,10 L20,30"/>
+    </g>
+</svg>

test/plugins/moveGroupAttrsToElems.02.orig.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <g transform="scale(2)">
+        <path d="M0,0 L10,20"/>
+        <path d="M0,10 L20,30"/>
+    </g>
+</svg>

test/plugins/moveGroupAttrsToElems.02.should.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <g>
+        <path d="M0,0 L10,20" transform="scale(2)"/>
+        <path d="M0,10 L20,30" transform="scale(2)"/>
+    </g>
+</svg>