Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(convertPathData): preserve vertex for markers only path #1967

Merged
merged 2 commits into from
Mar 2, 2024
Merged

fix(convertPathData): preserve vertex for markers only path #1967

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c3c8b74
fix(convertPathData): preserve vertex for markers only path
SethFalco Mar 2, 2024
c5ee1bb
chore(applyTransforms): fix typo in comment
SethFalco Mar 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions plugins/applyTransforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ const applyMatrixToPathData = (pathData, matrix) => {
}

// horizontal lineto (x)
// convert to lineto to handle two-dimentional transforms
// convert to lineto to handle two-dimensional transforms
if (command === 'H') {
command = 'L';
args = [args[0], cursor[1]];
Expand All @@ -223,7 +223,7 @@ const applyMatrixToPathData = (pathData, matrix) => {
}

// vertical lineto (y)
// convert to lineto to handle two-dimentional transforms
// convert to lineto to handle two-dimensional transforms
if (command === 'V') {
command = 'L';
args = [cursor[0], args[0]];
Expand Down
22 changes: 21 additions & 1 deletion plugins/convertPathData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,10 +172,13 @@ export const fn = (root, params) => {
computedStyle['stroke-linejoin'].value === 'round'
: true;

var data = path2js(node);
let data = path2js(node);

// TODO: get rid of functions returns
if (data.length) {
const includesVertices = data.some(
(item) => item.command !== 'm' && item.command !== 'M',
);
convertToRelative(data);

data = filters(data, newParams, {
Expand All @@ -188,6 +191,23 @@ export const fn = (root, params) => {
data = convertToMixed(data, newParams);
}

const hasMarker =
node.attributes['marker-start'] != null ||
node.attributes['marker-end'] != null;
const isMarkersOnlyPath =
hasMarker &&
includesVertices &&
data.every(
(item) => item.command === 'm' || item.command === 'M',
);

if (isMarkersOnlyPath) {
data.push({
command: 'z',
args: [],
});
}

// @ts-ignore
js2path(node, data, newParams);
}
Expand Down
30 changes: 30 additions & 0 deletions test/plugins/convertPathData.37.svg.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
Must preserve vertex for markers only path for consistent rendering across clients.
Must not add vertices if markers only path did not have commands other than M/m anyway.

See: https://github.com/svg/svgo/issues/1493

===

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9">
<marker id="a" stroke="red" viewBox="0 0 5 5">
<circle cx="2" cy="2" r="1"/>
</marker>
<marker id="b" stroke="green" viewBox="0 0 5 5">
<circle cx="2" cy="2" r="0.5"/>
</marker>
<path marker-start="url(#a)" d="M5 5h0"/>
<path marker-start="url(#b)" d="M5 5"/>
</svg>

@@@

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9">
<marker id="a" stroke="red" viewBox="0 0 5 5">
<circle cx="2" cy="2" r="1"/>
</marker>
<marker id="b" stroke="green" viewBox="0 0 5 5">
<circle cx="2" cy="2" r="0.5"/>
</marker>
<path marker-start="url(#a)" d="M5 5z"/>
<path marker-start="url(#b)" d="M5 5"/>
</svg>