Added mask and clip-path to unmergable properties.

svg · Feb 15, 2024 · c935a9c · c935a9c
1 parent 553a9a9
commit c935a9c
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 2 deletions.
diff --git 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
@@ -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>
diff --git a/test/plugins/mergePaths.12.svg.txt 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>