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

Preverve viewBox in nested <svg>

Browse Source
This commit is contained in:
Bogdan Chadkin
2021-03-06 13:39:31 +03:00
parent a2b0e73767
commit 28c01cfe65
3 changed files with 52 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
plugins/removeViewBox.js
View File

@ -23,26 +23,27 @@ var viewBoxElems = ['svg', 'pattern', 'symbol'];
* *
* @author Kir Belevich * @author Kir Belevich
*/ */
exports.fn = function(item) { exports.fn = function (item) {
if (
if ( item.isElem(viewBoxElems) &&
item.isElem(viewBoxElems) && item.hasAttr('viewBox') &&
item.hasAttr('viewBox') && item.hasAttr('width') &&
item.hasAttr('width') && item.hasAttr('height')
item.hasAttr('height') ) {
) { // TODO remove width/height for such case instead
if (item.isElem('svg') && item.closestElem('svg')) {
var nums = item.attr('viewBox').value.split(/[ ,]+/g); return;
if (
nums[0] === '0' &&
nums[1] === '0' &&
item.attr('width').value.replace(/px$/, '') === nums[2] && // could use parseFloat too
item.attr('height').value.replace(/px$/, '') === nums[3]
) {
item.removeAttr('viewBox');
}
} }
var nums = item.attr('viewBox').value.split(/[ ,]+/g);
if (
nums[0] === '0' &&
nums[1] === '0' &&
item.attr('width').value.replace(/px$/, '') === nums[2] && // could use parseFloat too
item.attr('height').value.replace(/px$/, '') === nums[3]
) {
item.removeAttr('viewBox');
}
}
}; };

29
test/plugins/removeViewBox.05.svg Normal file
View File

@ -0,0 +1,29 @@
ViewBox in nested <svg> should be preserved to not break scale
===
<svg width="480" height="360" viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<svg id="svg-sub-root" viewBox="0 0 450 450" width="450" height="450">
<rect x="225" y="0" width="220" height="220" style="fill:magenta"/>
<rect x="0" y="225" width="220" height="220" style="fill:#f0f"/>
<rect x="225" y="225" width="220" height="220" fill="#f0f"/>
</svg>
</defs>
<use x="60" y="50" width="240" height="240" xlink:href="#svg-sub-root"/>
<rect x="300" y="170" width="118" height="118" fill="magenta"/>
</svg>
@@@
<svg width="480" height="360" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<svg id="svg-sub-root" viewBox="0 0 450 450" width="450" height="450">
<rect x="225" y="0" width="220" height="220" style="fill:magenta"/>
<rect x="0" y="225" width="220" height="220" style="fill:#f0f"/>
<rect x="225" y="225" width="220" height="220" fill="#f0f"/>
</svg>
</defs>
<use x="60" y="50" width="240" height="240" xlink:href="#svg-sub-root"/>
<rect x="300" y="170" width="118" height="118" fill="magenta"/>
</svg>

4
test/regression.js
View File

@ -115,8 +115,8 @@ const runTests = async ({ svgFiles }) => {
name === 'styling-css-01-b' || name === 'styling-css-01-b' ||
name === 'styling-css-03-b' || name === 'styling-css-03-b' ||
name === 'styling-css-04-f' || name === 'styling-css-04-f' ||
// mismatched draft cases // strange artifact breaks inconsistently breaks regression tests
name === 'struct-use-07-b' name === 'filters-conv-05-f'
) { ) {
console.info(`${name} is skipped`); console.info(`${name} is skipped`);
skipped += 1; skipped += 1;