diff --git a/.svgo.yml b/.svgo.yml index 313bf7c6..5f76ca58 100644 --- a/.svgo.yml +++ b/.svgo.yml @@ -55,6 +55,7 @@ plugins: - removeDesc - removeDimensions - removeAttrs + - removeAttributesBySelector - removeElementsByAttr - addClassesToSVGElement - removeStyleElement diff --git a/README.md b/README.md index 66a254a1..4dfcefc5 100644 --- a/README.md +++ b/README.md @@ -58,6 +58,7 @@ Today we have: | [sortAttrs](https://github.com/svg/svgo/blob/master/plugins/sortAttrs.js) | sort element attributes for epic readability (disabled by default) | | [removeDimensions](https://github.com/svg/svgo/blob/master/plugins/removeDimensions.js) | remove `width`/`height` attributes if `viewBox` is present (opposite to removeViewBox, disable it first) (disabled by default) | | [removeAttrs](https://github.com/svg/svgo/blob/master/plugins/removeAttrs.js) | remove attributes by pattern (disabled by default) | +| [removeAttributesBySelector](https://github.com/svg/svgo/blob/master/plugins/removeAttributesBySelector.js) | removes attributes of elements that match a css selector (disabled by default) | | [removeElementsByAttr](https://github.com/svg/svgo/blob/master/plugins/removeElementsByAttr.js) | remove arbitrary elements by ID or className (disabled by default) | | [addClassesToSVGElement](https://github.com/svg/svgo/blob/master/plugins/addClassesToSVGElement.js) | add classnames to an outer `` element (disabled by default) | | [addAttributesToSVGElement](https://github.com/svg/svgo/blob/master/plugins/addAttributesToSVGElement.js) | adds attributes to an outer `` element (disabled by default) | diff --git a/plugins/removeAttributesBySelector.js b/plugins/removeAttributesBySelector.js new file mode 100644 index 00000000..3ae7463d --- /dev/null +++ b/plugins/removeAttributesBySelector.js @@ -0,0 +1,70 @@ +'use strict'; + +exports.type = 'perItem'; + +exports.active = false; + +exports.description = 'removes attributes of elements that match a css selector'; + + +/** + * Removes attributes of elements that match a css selector. + * + * @param {Object} item current iteration item + * @param {Object} params plugin params + * @return {Boolean} if false, item will be filtered out + * + * @example + * A selector removing a single attribute + * plugins: + * - removeAttributesBySelector: + * selector: "[fill='#00ff00']" + * attributes: "fill" + * + * + * ↓ + * + * + * A selector removing multiple attributes + * plugins: + * - removeAttributesBySelector: + * selector: "[fill='#00ff00']" + * attributes: + * - fill + * - stroke + * + * + * ↓ + * + * + * Multiple selectors removing attributes + * plugins: + * - removeAttributesBySelector: + * selectors: + * - selector: "[fill='#00ff00']" + * attributes: "fill" + * + * - selector: "#remove" + * attributes: + * - stroke + * - id + * + * + * ↓ + * + * + * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors|MDN CSS Selectors} + * + * @author Bradley Mease + */ +exports.fn = function(item, params) { + + var selectors = Array.isArray(params.selectors) ? params.selectors : [params]; + + selectors.map(function(i) { + if (item.matches(i.selector)) { + item.removeAttr(i.attributes); + } + }); + +}; diff --git a/test/plugins/removeAttributesBySelector.01.svg b/test/plugins/removeAttributesBySelector.01.svg new file mode 100644 index 00000000..cf47799a --- /dev/null +++ b/test/plugins/removeAttributesBySelector.01.svg @@ -0,0 +1,13 @@ + + + + +@@@ + + + + + +@@@ + +{ "selector": "[fill='#00ff00']", "attributes": "fill" } diff --git a/test/plugins/removeAttributesBySelector.02.svg b/test/plugins/removeAttributesBySelector.02.svg new file mode 100644 index 00000000..a584eb7a --- /dev/null +++ b/test/plugins/removeAttributesBySelector.02.svg @@ -0,0 +1,13 @@ + + + + +@@@ + + + + + +@@@ + +{ "selector": "[fill='#00ff00']", "attributes": ["fill", "stroke"] } diff --git a/test/plugins/removeAttributesBySelector.03.svg b/test/plugins/removeAttributesBySelector.03.svg new file mode 100644 index 00000000..d54f7314 --- /dev/null +++ b/test/plugins/removeAttributesBySelector.03.svg @@ -0,0 +1,13 @@ + + + + +@@@ + + + + + +@@@ + +{ "selectors": [{ "selector": "[fill='#00ff00']", "attributes": "fill" }, { "selector": "#remove", "attributes": ["stroke", "id"] }] }