1
0
mirror of https://github.com/svg/svgo.git synced 2025-07-29 20:21:14 +03:00

Added removeAttrsPlugin and extended test to have optional params passed along

This commit is contained in:
Benny Schudel
2014-03-27 14:42:14 +01:00
parent 72fdf9026a
commit 2f33f9eab1
7 changed files with 172 additions and 18 deletions

View File

@ -45,3 +45,4 @@ plugins:
- transformsWithOnePath
- sortAttrs
- removeDimensions
- removeAttrs

View File

@ -48,6 +48,7 @@ Today we have:
* [ [>](https://github.com/svg/svgo/blob/master/plugins/convertShapeToPath.js) ] convert some basic shapes to path
* [ [>](https://github.com/svg/svgo/blob/master/plugins/transformsWithOnePath.js) ] apply transforms, crop by real width, center vertical alignment and resize SVG with one Path inside
* [ [>](https://github.com/svg/svgo/blob/master/plugins/removeDimensions.js) ] remove width/height attributes if viewBox is present
* [ [>](https://github.com/svg/svgo/blob/master/plugins/removeAttrs.js) ] remove attributes by pattern
Want to know how it works and how to write your own plugin? [Of course you want to](https://github.com/svg/svgo/blob/master/docs/how-it-works/en.md).

View File

@ -48,6 +48,7 @@ SVGO имеет расширяемую архитектуру, в которой
* [ [>](https://github.com/svg/svgo/blob/master/plugins/convertShapeToPath.js) ] конвертирование простых форм в Path
* [ [>](https://github.com/svg/svgo/blob/master/plugins/transformsWithOnePath.js) ] применение трансформаций, обрезка по реальной ширине, вертикальное выравнивание по центру и изменение размеров SVG с одним Path внутри
* [ [>](https://github.com/svg/svgo/blob/master/plugins/removeDimensions.js) ] !!translation needed - remove width/height attributes if viewBox is present
* [ [>](https://github.com/svg/svgo/blob/master/plugins/removeAttrs.js) ] !!translation needed - remove attributes by pattern
Хотите узнать, как это работает и как написать свой плагин? [Конечно же, да!](https://github.com/svg/svgo/blob/master/docs/how-it-works/ru.md).

112
plugins/removeAttrs.js Normal file
View File

@ -0,0 +1,112 @@
'use strict';
var ELEM_SEP = ':';
exports.type = 'perItem';
exports.active = false;
exports.params = {
attrs: []
};
/**
* Remove attributes
*
* @param attrs:
*
* format: [ element* : attribute* ]
*
* element : regexp (wrapped into ^...$), single * or omitted > all elements
* attribute : regexp (wrapped into ^...$)
*
* examples:
*
* > remove fill attribute on path element
* ---
* attrs: 'path:fill'
*
*
* > remove all fill and stroke attribute
* ---
* attrs:
* - 'fill'
* - 'stroke'
*
* [is same as]
*
* attrs: '(fill|stroke)'
*
* [is same as]
*
* attrs: '*:(fill|stroke)'
*
* [is same as]
*
* attrs: '.*:(fill|stroke)'
*
*
* > remove all stroke related attributes
* ----
* attrs: 'stroke.*'
*
*
* @param {Object} item current iteration item
* @param {Object} params plugin params
* @return {Boolean} if false, item will be filtered out
*
* @author Benny Schudel
*/
exports.fn = function(item, params) {
// wrap into an array if params is not
if (!Array.isArray(params.attrs)) {
params.attrs = [params.attrs];
}
if (item.isElem()) {
// prepare patterns
var patterns = params.attrs.map(function(pattern) {
// apply to all elements if specifc element is omitted
if (pattern.indexOf(ELEM_SEP) === -1) {
pattern = ['.*', ELEM_SEP, pattern].join('');
}
// create regexps for element and attribute name
return pattern.split(ELEM_SEP)
.map(function(value) {
// adjust single * to match anything
if (value === '*') { value = '.*'; }
return new RegExp(['^', value, '$'].join(''), 'i');
});
});
// loop patterns
patterns.forEach(function(pattern) {
// matches element
if (pattern[0].test(item.elem)) {
// loop attributes
item.eachAttr(function(attr) {
var name = attr.name;
// matches attribute name
if (pattern[1].test(name)) {
item.removeAttr(name);
}
});
}
});
}
};

View File

@ -13,9 +13,7 @@ describe('plugins tests', function() {
var match = file.match(regFilename),
index,
name,
svgo,
plugins;
name;
if (match) {
@ -24,27 +22,30 @@ describe('plugins tests', function() {
file = PATH.resolve(__dirname, file);
plugins = {};
plugins[name] = true;
svgo = new SVGO({
full: true,
plugins: [ plugins ],
js2svg: { pretty: true }
});
it(name + '.' + index, function(done) {
FS.readFile(file, 'utf8', function(err, data) {
var splitted = data.split('@@@'),
var splitted = data.trim().split(/\s*@@@\s*/),
orig = splitted[0],
should = splitted[1];
should = splitted[1],
params = splitted[2],
plugins = {},
svgo;
plugins[name] = (params) ? JSON.parse(params) : true;
svgo = new SVGO({
full : true,
plugins : [ plugins ],
js2svg : { pretty: true }
});
svgo.optimize(orig, function(result) {
result = '\n\n' + result.data;
result.should.be.equal(should);
//FIXME: results.data has a '\n' at the end while it should not
( result.data.trim() ).should.be.equal(should);
done();
});

View File

@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg">
<circle fill="red" stroke-width="6" stroke-dashoffset="5" cx="60" cy="60" r="50"/>
<circle fill="red" stroke="#000" stroke-width="6" stroke-dashoffset="5" stroke-opacity="0" cx="60" cy="60" r="50"/>
<circle stroke="#000" stroke-width="6" stroke-dashoffset="5" stroke-opacity="0" cx="60" cy="60" r="50"/>
<path fill="red" stroke="red" d="M100,200 300,400 H100 V300 C100,100 250,100 250,200 S400,300 400,200 Q400,50 600,300 T1000,300 z"/>
</svg>
@@@
<svg xmlns="http://www.w3.org/2000/svg">
<circle fill="red" cx="60" cy="60" r="50"/>
<circle fill="red" cx="60" cy="60" r="50"/>
<circle cx="60" cy="60" r="50"/>
<path stroke="red" d="M100,200 300,400 H100 V300 C100,100 250,100 250,200 S400,300 400,200 Q400,50 600,300 T1000,300 z"/>
</svg>
@@@
{"attrs":["circle:stroke.*","path:fill"]}

After

Width:  |  Height:  |  Size: 862 B

View File

@ -0,0 +1,19 @@
<svg xmlns="http://www.w3.org/2000/svg">
<circle fill="red" stroke-width="6" stroke-dashoffset="5" cx="60" cy="60" r="50"/>
<circle fill="red" stroke="#000" stroke-width="6" stroke-dashoffset="5" stroke-opacity="0" cx="60" cy="60" r="50"/>
<circle stroke="#000" stroke-width="6" stroke-dashoffset="5" stroke-opacity="0" cx="60" cy="60" r="50"/>
<path fill="red" stroke="red" d="M100,200 300,400 H100 V300 C100,100 250,100 250,200 S400,300 400,200 Q400,50 600,300 T1000,300 z"/>
</svg>
@@@
<svg xmlns="http://www.w3.org/2000/svg">
<circle stroke-width="6" stroke-dashoffset="5" cx="60" cy="60" r="50"/>
<circle stroke-width="6" stroke-dashoffset="5" stroke-opacity="0" cx="60" cy="60" r="50"/>
<circle stroke-width="6" stroke-dashoffset="5" stroke-opacity="0" cx="60" cy="60" r="50"/>
<path d="M100,200 300,400 H100 V300 C100,100 250,100 250,200 S400,300 400,200 Q400,50 600,300 T1000,300 z"/>
</svg>
@@@
{"attrs":"(fill|stroke)"}

After

Width:  |  Height:  |  Size: 966 B