fix(collapseGroups): check for filter in style as well as attribute (#…

…1952)
svg · Feb 7, 2024 · a938d5e · a938d5e
1 parent 9a7750f
commit a938d5e
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 2 deletions.
diff --git a/plugins/collapseGroups.js b/plugins/collapseGroups.js
@@ -1,3 +1,4 @@
+import { computeStyle, collectStylesheet } from '../lib/style.js';
 import { inheritableAttrs, elemsGroups } from './_collections.js';
 
 /**
@@ -50,7 +51,9 @@ const hasAnimatedAttr = (node, name) => {
  *
  * @type {import('./plugins-types.js').Plugin<'collapseGroups'>}
  */
-export const fn = () => {
+export const fn = (root) => {
+  const stylesheet = collectStylesheet(root);
+
   return {
     element: {
       exit: (node, parentNode) => {
@@ -68,11 +71,14 @@ export const fn = () => {
           node.children.length === 1
         ) {
           const firstChild = node.children[0];
+          const nodeHasFilter = !!(
+            node.attributes.filter || computeStyle(stylesheet, node).filter
+          );
           // TODO untangle this mess
           if (
             firstChild.type === 'element' &&
             firstChild.attributes.id == null &&
-            node.attributes.filter == null &&
+            !nodeHasFilter &&
             (node.attributes.class == null ||
               firstChild.attributes.class == null) &&
             ((node.attributes['clip-path'] == null &&

diff --git a/test/plugins/collapseGroups.18.svg.txt b/test/plugins/collapseGroups.18.svg.txt
@@ -0,0 +1,45 @@
+Don't collapse groups if outer group has filter (as style or attribute).
+
+===
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <clipPath id="a">
+        <circle cx="25" cy="15" r="10"/>
+    </clipPath>
+    <filter id="b">
+        <feColorMatrix type="saturate"/>
+    </filter>
+    <g filter="url(#b)">
+        <g clip-path="url(#a)">
+            <circle cx="30" cy="10" r="10" fill="yellow" id="c1"/>
+        </g>
+    </g>
+    <g style="filter:url(#b)">
+        <g clip-path="url(#a)">
+            <circle cx="20" cy="10" r="10" fill="blue" id="c2"/>
+        </g>
+    </g>
+    <circle cx="25" cy="15" r="10" stroke="black" stroke-width=".1" fill="none"/>
+</svg>
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <clipPath id="a">
+        <circle cx="25" cy="15" r="10"/>
+    </clipPath>
+    <filter id="b">
+        <feColorMatrix type="saturate"/>
+    </filter>
+    <g filter="url(#b)">
+        <g clip-path="url(#a)">
+            <circle cx="30" cy="10" r="10" fill="yellow" id="c1"/>
+        </g>
+    </g>
+    <g style="filter:url(#b)">
+        <g clip-path="url(#a)">
+            <circle cx="20" cy="10" r="10" fill="blue" id="c2"/>
+        </g>
+    </g>
+    <circle cx="25" cy="15" r="10" stroke="black" stroke-width=".1" fill="none"/>
+</svg>