From c935a9c6c4f717350bf45ffa0ccb77688487f01a Mon Sep 17 00:00:00 2001
From: John Kenny <johnkenny54@yahoo.com>
Date: Wed, 14 Feb 2024 18:03:25 -0800
Subject: [PATCH] Added mask and clip-path to unmergable properties.

---
 plugins/mergePaths.js              |  7 +++--
 test/plugins/mergePaths.11.svg.txt | 39 ++++++++++++++++++++++++++++
 test/plugins/mergePaths.12.svg.txt | 41 ++++++++++++++++++++++++++++++
 3 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 test/plugins/mergePaths.11.svg.txt
 create mode 100644 test/plugins/mergePaths.12.svg.txt

diff --git a/plugins/mergePaths.js b/plugins/mergePaths.js
index 6001a1119..ddf874cf5 100644
--- a/plugins/mergePaths.js
+++ b/plugins/mergePaths.js
@@ -18,7 +18,7 @@ export const description = 'merges multiple paths in one if possible';
  * @param {ComputedStyles} computedStyle
  * @param {string} attName
  */
-function elementHasGradient(element, computedStyle, attName) {
+function elementHasURL(element, computedStyle, attName) {
   const style = computedStyle[attName];
   if (!style || style.type !== 'static') {
     return false;
@@ -99,8 +99,11 @@ export const fn = (root, params) => {
             computedStyle['marker-start'] ||
             computedStyle['marker-mid'] ||
             computedStyle['marker-end'] ||
+            computedStyle['clip-path'] ||
+            computedStyle['mask'] ||
+            computedStyle['mask-image'] ||
             ['fill', 'filter', 'stroke'].some((attName) =>
-              elementHasGradient(child, computedStyle, attName),
+              elementHasURL(child, computedStyle, attName),
             )
           ) {
             if (prevPathData) {
diff --git a/test/plugins/mergePaths.11.svg.txt b/test/plugins/mergePaths.11.svg.txt
new file mode 100644
index 000000000..96645b792
--- /dev/null
+++ b/test/plugins/mergePaths.11.svg.txt
@@ -0,0 +1,39 @@
+Don't merge paths with a clip-path (issue #1267).
+
+===
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 400 400">
+    <style>
+        path.lg{clip-path:url(#myClip);}
+    </style>
+    <clipPath id="myClip" clipPathUnits="objectBoundingBox">
+        <circle cx=".5" cy=".5" r=".5"/>
+    </clipPath>
+    <path clip-path="url(#myClip)" fill="red" d="M 0 0 H 100 V 80 H 0 z"/>
+    <path clip-path="url(#myClip)" fill="red" d="M 200 0 H 300 V 80 H 200 z"/>
+    <path style="clip-path:url(#myClip)" fill="red" d="M 0 100 h 100 v 80 H 0 z"/>
+    <path style="clip-path:url(#myClip)" fill="red" d="M 200 100 H 300 v 80 H 200 z"/>
+    <path class="lg" fill="red" d="M 0 200 h 100 v 80 H 0 z"/>
+    <path class="lg" fill="red" d="M 200 200 H 300 v 80 H 200 z"/>
+    <path style="clip-path:circle(25%)" fill="red" d="M 0 300 h 100 v 80 H 0 z"/>
+    <path style="clip-path:circle(25%)" fill="red" d="M 200 300 H 300 v 80 H 200 z"/>
+</svg>
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 400 400">
+    <style>
+        path.lg{clip-path:url(#myClip);}
+    </style>
+    <clipPath id="myClip" clipPathUnits="objectBoundingBox">
+        <circle cx=".5" cy=".5" r=".5"/>
+    </clipPath>
+    <path clip-path="url(#myClip)" fill="red" d="M 0 0 H 100 V 80 H 0 z"/>
+    <path clip-path="url(#myClip)" fill="red" d="M 200 0 H 300 V 80 H 200 z"/>
+    <path style="clip-path:url(#myClip)" fill="red" d="M 0 100 h 100 v 80 H 0 z"/>
+    <path style="clip-path:url(#myClip)" fill="red" d="M 200 100 H 300 v 80 H 200 z"/>
+    <path class="lg" fill="red" d="M 0 200 h 100 v 80 H 0 z"/>
+    <path class="lg" fill="red" d="M 200 200 H 300 v 80 H 200 z"/>
+    <path style="clip-path:circle(25%)" fill="red" d="M 0 300 h 100 v 80 H 0 z"/>
+    <path style="clip-path:circle(25%)" fill="red" d="M 200 300 H 300 v 80 H 200 z"/>
+</svg>
\ No newline at end of file
diff --git a/test/plugins/mergePaths.12.svg.txt b/test/plugins/mergePaths.12.svg.txt
new file mode 100644
index 000000000..faf72aa5b
--- /dev/null
+++ b/test/plugins/mergePaths.12.svg.txt
@@ -0,0 +1,41 @@
+Don't merge paths with a mask (issue #1267).
+
+===
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 400 400">
+    <style>
+        path.lg{mask:url(#mask);}
+    </style>
+    <mask id="mask" maskContentUnits="objectBoundingBox">
+        <rect fill="white" x="0" y="0" width="100%" height="100%"/>
+        <circle fill="black" cx=".5" cy=".5" r=".5"/>
+    </mask>
+    <path mask="url(#mask)" fill="red" d="M 0 0 H 100 V 80 H 0 z"/>
+    <path mask="url(#mask)" fill="red" d="M 200 0 H 300 V 80 H 200 z"/>
+    <path style="mask:url(#mask)" fill="red" d="M 0 100 h 100 v 80 H 0 z"/>
+    <path style="mask:url(#mask)" fill="red" d="M 200 100 H 300 v 80 H 200 z"/>
+    <path class="lg" fill="red" d="M 0 200 h 100 v 80 H 0 z"/>
+    <path class="lg" fill="red" d="M 200 200 H 300 v 80 H 200 z"/>
+    <path style="mask-image: linear-gradient(to left top,black, transparent)" fill="red" d="M 0 300 h 100 v 80 H 0 z"/>
+    <path style="mask-image: linear-gradient(to left top,black, transparent)" fill="red" d="M 200 300 H 300 v 80 H 200 z"/>
+</svg>
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 400 400">
+    <style>
+        path.lg{mask:url(#mask);}
+    </style>
+    <mask id="mask" maskContentUnits="objectBoundingBox">
+        <rect fill="white" x="0" y="0" width="100%" height="100%"/>
+        <circle fill="black" cx=".5" cy=".5" r=".5"/>
+    </mask>
+    <path mask="url(#mask)" fill="red" d="M 0 0 H 100 V 80 H 0 z"/>
+    <path mask="url(#mask)" fill="red" d="M 200 0 H 300 V 80 H 200 z"/>
+    <path style="mask:url(#mask)" fill="red" d="M 0 100 h 100 v 80 H 0 z"/>
+    <path style="mask:url(#mask)" fill="red" d="M 200 100 H 300 v 80 H 200 z"/>
+    <path class="lg" fill="red" d="M 0 200 h 100 v 80 H 0 z"/>
+    <path class="lg" fill="red" d="M 200 200 H 300 v 80 H 200 z"/>
+    <path style="mask-image: linear-gradient(to left top,black, transparent)" fill="red" d="M 0 300 h 100 v 80 H 0 z"/>
+    <path style="mask-image: linear-gradient(to left top,black, transparent)" fill="red" d="M 200 300 H 300 v 80 H 200 z"/>
+</svg>
\ No newline at end of file