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

removeAttrs: add optional value filter (#977)

This commit is contained in:
GreLI
2019-02-24 22:00:55 +03:00
parent 5d97108687
commit d23355e91a
3 changed files with 65 additions and 6 deletions

View File

@ -25,10 +25,11 @@ exports.params = {
* *
* @param attrs: * @param attrs:
* *
* format: [ element* : attribute* ] * format: [ element* : attribute* : value* ]
* *
* element : regexp (wrapped into ^...$), single * or omitted > all elements * element : regexp (wrapped into ^...$), single * or omitted > all elements (must be present when value is used)
* attribute : regexp (wrapped into ^...$) * attribute : regexp (wrapped into ^...$)
* value : regexp (wrapped into ^...$), single * or omitted > all values
* *
* examples: * examples:
* *
@ -41,6 +42,10 @@ exports.params = {
* --- * ---
* attrs: 'path:fill' * attrs: 'path:fill'
* *
* > remove fill attribute on path element where value is none
* ---
* attrs: 'path:fill:none'
*
* *
* > remove all fill and stroke attribute * > remove all fill and stroke attribute
* --- * ---
@ -60,6 +65,10 @@ exports.params = {
* *
* attrs: '.*:(fill|stroke)' * attrs: '.*:(fill|stroke)'
* *
* [is same as]
*
* attrs: '.*:(fill|stroke):.*'
*
* *
* > remove all stroke related attributes * > remove all stroke related attributes
* ---- * ----
@ -85,12 +94,16 @@ exports.fn = function(item, params) {
// prepare patterns // prepare patterns
var patterns = params.attrs.map(function(pattern) { var patterns = params.attrs.map(function(pattern) {
// apply to all elements if specifc element is omitted // if no element separators (:), assume it's attribute name, and apply to all elements *regardless of value*
if (pattern.indexOf(elemSeparator) === -1) { if (pattern.indexOf(elemSeparator) === -1) {
pattern = ['.*', elemSeparator, pattern].join(''); pattern = ['.*', elemSeparator, pattern, elemSeparator, '.*'].join('');
// if only 1 separator, assume it's element and attribute name, and apply regardless of attribute value
} else if (pattern.split(elemSeparator).length < 3) {
pattern = [pattern, elemSeparator, '.*'].join('');
} }
// create regexps for element and attribute name // create regexps for element, attribute name, and attribute value
return pattern.split(elemSeparator) return pattern.split(elemSeparator)
.map(function(value) { .map(function(value) {
@ -118,9 +131,13 @@ exports.fn = function(item, params) {
if (!(isFillCurrentColor || isStrokeCurrentColor)) { if (!(isFillCurrentColor || isStrokeCurrentColor)) {
// matches attribute name // matches attribute name
if (pattern[1].test(name)) { if (pattern[1].test(name)) {
// matches attribute value
if (pattern[2].test(attr.value)) {
item.removeAttr(name); item.removeAttr(name);
} }
} }
}
}); });

View File

@ -0,0 +1,21 @@
<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"/>
<circle stroke="#FFF" stroke-width="6" stroke-dashoffset="5" stroke-opacity="0" cx="60" cy="60" r="25"/>
<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="#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"/>
<circle stroke="#FFF" stroke-width="6" stroke-dashoffset="5" stroke-opacity="0" cx="60" cy="60" r="25"/>
<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":"*:(stroke|fill):red"}

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,21 @@
<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"/>
<circle stroke="#FFF" stroke-width="6" stroke-dashoffset="5" stroke-opacity="0" cx="60" cy="60" r="25"/>
<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"/>
<circle stroke="#FFF" stroke-width="6" stroke-dashoffset="5" stroke-opacity="0" cx="60" cy="60" r="25"/>
<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":"*:(stroke|fill):((?!^#FFF$).)*"}

After

Width:  |  Height:  |  Size: 1.2 KiB