sysutils/svgo
1
0
Fork 0
mirror of https://github.com/svg/svgo.git synced 2025-07-31 07:44:22 +03:00
Code Activity

Add ability to remove elements by className

Browse Source
This commit is contained in:
Eli Dupuis
2016-07-20 22:42:41 -06:00
parent 7fd48e9d20
commit d60c5c18da
7 changed files with 92 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
plugins/removeElementsByAttr.js
View File

@ -4,7 +4,7 @@ exports.type = 'perItem';
exports.active = false; exports.active = false;
exports.description = 'removes arbitrary elements by ID (disabled by default)'; exports.description = 'removes arbitrary elements by ID or className (disabled by default)';
exports.params = { exports.params = {
id: [], id: [],
@ -12,7 +12,7 @@ exports.params = {
}; };
/** /**
* Remove SVG elements by ID. * Remove arbitrary SVG elements by ID or className.
* *
* @param id * @param id
* examples: * examples:
@ -29,26 +29,52 @@ exports.params = {
* - 'elementID' * - 'elementID'
* - 'anotherID' * - 'anotherID'
* *
* @param class
* examples:
*
* > single: remove all elements with class of `elementClass`
* ---
* removeElementsByAttr:
* class: 'elementClass'
*
* > list: remove all elements with class of `elementClass` or `anotherClass`
* ---
* removeElementsByAttr:
* class:
* - 'elementClass'
* - 'anotherClass'
*
* @param {Object} item current iteration item * @param {Object} item current iteration item
* @param {Object} params plugin params * @param {Object} params plugin params
* @return {Boolean} if false, item will be filtered out * @return {Boolean} if false, item will be filtered out
* *
* @author Eli Dupuis * @author Eli Dupuis (@elidupuis)
*/ */
exports.fn = function(item, params) { exports.fn = function(item, params) {
var elemId; var elemId, elemClass;
// wrap into an array if params is not // wrap params in an array if not already
if (!Array.isArray(params.id)) { ['id', 'class'].forEach(function(key) {
params.id = [params.id]; if (!Array.isArray(params[key])) {
} params[key] = [ params[key] ];
}
});
// abort if current item is no an element
if (!item.isElem()) { if (!item.isElem()) {
return; return;
} }
// remove element if it's `id` matches configured `id` params
elemId = item.attr('id'); elemId = item.attr('id');
if (elemId) { if (elemId) {
return params.id.indexOf(elemId.value) === -1; return params.id.indexOf(elemId.value) === -1;
} }
// remove element if it's `class` contains any of the configured `class` params
elemClass = item.attr('class');
if (elemClass) {
var hasClassRegex = new RegExp(params.class.join('|'));
return !hasClassRegex.test(elemClass.value);
}
}; };

5
test/plugins/removeElementsByAttr.01.svg
View File

@ -6,9 +6,6 @@
@@@ @@@
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19"> <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
<rect id="someID" width="19" height="19"/>
<path id="close" d="M1093.5,31.792l-0.72.721-8.27-8.286-8.28,8.286-0.72-.721,8.28-8.286-8.28-8.286,0.72-.721,8.28,8.286,8.27-8.286,0.72,0.721-8.27,8.286Z" transform="translate(-1075 -14)"/> <path id="close" d="M1093.5,31.792l-0.72.721-8.27-8.286-8.28,8.286-0.72-.721,8.28-8.286-8.28-8.286,0.72-.721,8.28,8.286,8.27-8.286,0.72,0.721-8.27,8.286Z" transform="translate(-1075 -14)"/>
</svg> </svg>
@@@
{ "id": "someID" }

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 648 B

After

Width:  |  Height:  |  Size: 670 B

8
test/plugins/removeElementsByAttr.02.svg
View File

@ -1,12 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19"> <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
<rect id="someID" width="19" height="19"/> <rect id="someID" width="19" height="19"/>
<path id="anotherID" d="M1093.5,31.792l-0.72.721-8.27-8.286-8.28,8.286-0.72-.721,8.28-8.286-8.28-8.286,0.72-.721,8.28,8.286,8.27-8.286,0.72,0.721-8.27,8.286Z" transform="translate(-1075 -14)"/> <path id="close" d="M1093.5,31.792l-0.72.721-8.27-8.286-8.28,8.286-0.72-.721,8.28-8.286-8.28-8.286,0.72-.721,8.28,8.286,8.27-8.286,0.72,0.721-8.27,8.286Z" transform="translate(-1075 -14)"/>
</svg> </svg>
@@@ @@@
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19"/> <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
<path id="close" d="M1093.5,31.792l-0.72.721-8.27-8.286-8.28,8.286-0.72-.721,8.28-8.286-8.28-8.286,0.72-.721,8.28,8.286,8.27-8.286,0.72,0.721-8.27,8.286Z" transform="translate(-1075 -14)"/>
</svg>
@@@ @@@
{ "id": ["someID", "anotherID"] } { "id": "someID" }

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 467 B

After

Width:  |  Height:  |  Size: 648 B

11
test/plugins/removeElementsByAttr.03.svg
View File

@ -1,11 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19"> <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
<rect id="someID" width="19" height="19"/> <rect id="someID" width="19" height="19"/>
<path id="close" d="M1093.5,31.792l-0.72.721-8.27-8.286-8.28,8.286-0.72-.721,8.28-8.286-8.28-8.286,0.72-.721,8.28,8.286,8.27-8.286,0.72,0.721-8.27,8.286Z" transform="translate(-1075 -14)"/> <path id="anotherID" d="M1093.5,31.792l-0.72.721-8.27-8.286-8.28,8.286-0.72-.721,8.28-8.286-8.28-8.286,0.72-.721,8.28,8.286,8.27-8.286,0.72,0.721-8.27,8.286Z" transform="translate(-1075 -14)"/>
</svg> </svg>
@@@ @@@
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19"> <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19"/>
<rect id="someID" width="19" height="19"/>
<path id="close" d="M1093.5,31.792l-0.72.721-8.27-8.286-8.28,8.286-0.72-.721,8.28-8.286-8.28-8.286,0.72-.721,8.28,8.286,8.27-8.286,0.72,0.721-8.27,8.286Z" transform="translate(-1075 -14)"/> @@@
</svg>
{ "id": ["someID", "anotherID"] }

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 670 B

After

Width:  |  Height:  |  Size: 467 B

17
test/plugins/removeElementsByAttr.04.svg Normal file
View File

@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
<rect class="someClass" width="19" height="19"/>
<path class="close" d="M1093.5,31.792l-0.72.721-8.27-8.286-8.28,8.286-0.72-.721,8.28-8.286-8.28-8.286,0.72-.721,8.28,8.286,8.27-8.286,0.72,0.721-8.27,8.286Z" transform="translate(-1075 -14)"/>
<rect class="someClass extraClass"/>
<rect class="SOMEclass case-sensitive"/>
</svg>
@@@
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
<path class="close" d="M1093.5,31.792l-0.72.721-8.27-8.286-8.28,8.286-0.72-.721,8.28-8.286-8.28-8.286,0.72-.721,8.28,8.286,8.27-8.286,0.72,0.721-8.27,8.286Z" transform="translate(-1075 -14)"/>
<rect class="SOMEclass case-sensitive"/>
</svg>
@@@
{ "class": "someClass" }
Side by Side

After

Width:  |  Height:  |  Size: 797 B

13
test/plugins/removeElementsByAttr.05.svg Normal file
View File

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
<rect class="someClass" width="19" height="19"/>
<path class="anotherClass" d="M1093.5,31.792l-0.72.721-8.27-8.286-8.28,8.286-0.72-.721,8.28-8.286-8.28-8.286,0.72-.721,8.28,8.286,8.27-8.286,0.72,0.721-8.27,8.286Z" transform="translate(-1075 -14)"/>
<rect class="someClass extraClass"/>
</svg>
@@@
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19"/>
@@@
{ "class": ["someClass", "anotherClass"] }
Side by Side

After

Width:  |  Height:  |  Size: 529 B

16
test/plugins/removeElementsByAttr.06.svg Normal file
View File

@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
<rect class="someClass" width="19" height="19"/>
<path class="someClass extraClass" d="M1093.5,31.792l-0.72.721-8.27-8.286-8.28,8.286-0.72-.721,8.28-8.286-8.28-8.286,0.72-.721,8.28,8.286,8.27-8.286,0.72,0.721-8.27,8.286Z" transform="translate(-1075 -14)"/>
<rect class="anotherClass"/>
<path id="someID" class="anotherID"/>
</svg>
@@@
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
<rect class="anotherClass"/>
</svg>
@@@
{ "id": "someID", "class": "someClass" }
Side by Side

After

Width:  |  Height:  |  Size: 608 B