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

svg · Mar 2, 2024 · 8d6385b · 8d6385b
1 parent 53aad59
commit 8d6385b
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 3 deletions.
diff --git a/plugins/applyTransforms.js b/plugins/applyTransforms.js
@@ -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]];
@@ -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]];

diff --git a/plugins/convertPathData.js b/plugins/convertPathData.js
@@ -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, {
@@ -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);
           }

diff --git a/test/plugins/convertPathData.37.svg.txt b/test/plugins/convertPathData.37.svg.txt
@@ -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>