plugins/removeNonInheritableGroupAttrs: new plugin to fix #101

.svgo.yml

@@ -61,6 +61,10 @@ plugins:
       unknownAttrs: true
       defaultAttrs: true
 
+  - name: removeNonInheritableGroupAttrs
+    active: true
+    type: perItem
+
   - name: removeUselessStrokeAndFill
     active: true
     type: perItem

plugins/_collections.js

@@ -15,11 +15,6 @@ exports.elemsGroups = {
 
 exports.pathElems = ['path', 'glyph', 'missing-glyph'];
 
-// var defaults = exports.defaults = {
-//     'externalResourcesRequired': 'false',
-//     'xlink:type': 'simple'
-// };
-
 // http://www.w3.org/TR/SVG/intro.html#Definitions
 exports.attrsGroups = {
     animationAddition: ['additive', 'accumulate'],

plugins/removeNonInheritableGroupAttrs.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var inheritableAttrs = require('./_collections').inheritableAttrs,
+    presentationAttrs = require('./_collections').attrsGroups.presentation,
+    excludedAttrs = ['display', 'opacity'];
+
+/**
+ * Remove non-inheritable group's "presentation" attributes.
+ *
+ * @param {Object} item current iteration item
+ * @return {Boolean} if false, item will be filtered out
+ *
+ * @author Kir Belevich
+ */
+exports.removeNonInheritableGroupAttrs = function(item) {
+
+    if (item.isElem('g')) {
+
+        item.eachAttr(function(attr) {
+            if (
+                presentationAttrs.indexOf(attr.name) !== -1 &&
+                excludedAttrs.indexOf(attr.name) === -1 &&
+                inheritableAttrs.indexOf(attr.name) === -1
+            ) {
+                item.removeAttr(attr.name);
+            }
+        });
+
+    }
+
+};

test/plugins/removeNonInheritableGroupAttrs.01.orig.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <g class="test" clip-path="url(#clip1)" transform="rotate(45)" display="none" opacity="0.5" visibility="visible">
+        <path d="M0 0 L 10 20"/>
+    </g>
+</svg>

test/plugins/removeNonInheritableGroupAttrs.01.should.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+    <g class="test" transform="rotate(45)" display="none" opacity="0.5" visibility="visible">
+        <path d="M0 0 L 10 20"/>
+    </g>
+</svg>