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

Prevent merging path when marker-end style is specified

Browse Source 
Ref https://github.com/svg/svgo/issues/1217 https://github.com/svg/svgo/issues/958 https://github.com/svg/svgo/issues/872
This commit is contained in:
Bogdan Chadkin
2021-03-05 23:59:27 +03:00
parent 555a9619db
commit de4fd79b57
2 changed files with 90 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
plugins/mergePaths.js
View File

@ -1,5 +1,8 @@
'use strict'; 'use strict';
const { computeStyle } = require('../lib/style.js');
const { path2js, js2path, intersects } = require('./_path.js');
exports.type = 'perItem'; exports.type = 'perItem';
exports.active = true; exports.active = true;
@ -14,10 +17,6 @@ exports.params = {
noSpaceAfterFlags: false, // a20 60 45 0 1 30 20 → a20 60 45 0130 20 noSpaceAfterFlags: false, // a20 60 45 0 1 30 20 → a20 60 45 0130 20
}; };
var path2js = require('./_path.js').path2js,
js2path = require('./_path.js').js2path,
intersects = require('./_path.js').intersects;
/** /**
* Merge multiple Paths into one. * Merge multiple Paths into one.
* *
@ -27,15 +26,14 @@ var path2js = require('./_path.js').path2js,
* @author Kir Belevich, Lev Solntsev * @author Kir Belevich, Lev Solntsev
*/ */
exports.fn = function (item, params) { exports.fn = function (item, params) {
if (!item.isElem() || item.isEmpty()) return; if (!item.isElem() || item.isEmpty()) return;
var prevContentItem = null, var prevContentItem = null,
prevContentItemKeys = null; prevContentItemKeys = null;
item.content = item.content.filter(function (contentItem) { item.content = item.content.filter(function (contentItem) {
if (
if (prevContentItem && prevContentItem &&
prevContentItem.isElem('path') && prevContentItem.isElem('path') &&
prevContentItem.isEmpty() && prevContentItem.isEmpty() &&
prevContentItem.hasAttr('d') && prevContentItem.hasAttr('d') &&
@ -43,17 +41,28 @@ exports.fn = function(item, params) {
contentItem.isEmpty() && contentItem.isEmpty() &&
contentItem.hasAttr('d') contentItem.hasAttr('d')
) { ) {
const computedStyle = computeStyle(contentItem);
// keep path to not break markers
if (
computedStyle['marker-start'] ||
computedStyle['marker-mid'] ||
computedStyle['marker-end']
) {
return true;
}
if (!prevContentItemKeys) { if (!prevContentItemKeys) {
prevContentItemKeys = Object.keys(prevContentItem.attrs); prevContentItemKeys = Object.keys(prevContentItem.attrs);
} }
var contentItemAttrs = Object.keys(contentItem.attrs), var contentItemAttrs = Object.keys(contentItem.attrs),
equalData = prevContentItemKeys.length == contentItemAttrs.length && equalData =
prevContentItemKeys.length == contentItemAttrs.length &&
contentItemAttrs.every(function (key) { contentItemAttrs.every(function (key) {
return key == 'd' || return (
prevContentItem.hasAttr(key) && key == 'd' ||
prevContentItem.attr(key).value == contentItem.attr(key).value; (prevContentItem.hasAttr(key) &&
prevContentItem.attr(key).value == contentItem.attr(key).value)
);
}), }),
prevPathJS = path2js(prevContentItem), prevPathJS = path2js(prevContentItem),
curPathJS = path2js(contentItem); curPathJS = path2js(contentItem);
@ -67,7 +76,5 @@ exports.fn = function(item, params) {
prevContentItem = contentItem; prevContentItem = contentItem;
prevContentItemKeys = null; prevContentItemKeys = null;
return true; return true;
}); });
}; };

35
test/plugins/mergePaths.07.svg Normal file
View File

@ -0,0 +1,35 @@
Merged paths loose their ends and markers are rendered incorrectly
===
<svg width="100" height="100">
<defs>
<style>
.a {marker-end: url(#arrowhead_end);}
</style>
<marker id="arrowhead_end" markerWidth="10" markerHeight="10" refX="6" refY="3">
<path d="M 0,0 l 6,3 l -6,3" stroke="black" />
</marker>
</defs>
<path d="M 10,10 h50" stroke="black" marker-end="url(#arrowhead_end)" />
<path d="M 10,50 h50" stroke="black" marker-end="url(#arrowhead_end)" />
<path d="M 10,60 h60" stroke="black" class="a" />
<path d="M 10,70 h60" stroke="black" class="a"/>
</svg>
@@@
<svg width="100" height="100">
<defs>
<style>
.a {marker-end: url(#arrowhead_end);}
</style>
<marker id="arrowhead_end" markerWidth="10" markerHeight="10" refX="6" refY="3">
<path d="M 0,0 l 6,3 l -6,3" stroke="black"/>
</marker>
</defs>
<path d="M 10,10 h50" stroke="black" marker-end="url(#arrowhead_end)"/>
<path d="M 10,50 h50" stroke="black" marker-end="url(#arrowhead_end)"/>
<path d="M 10,60 h60" stroke="black" class="a"/>
<path d="M 10,70 h60" stroke="black" class="a"/>
</svg>