inlineStyles plugin should not remove id attribute from elements.

svg · Aug 21, 2024 · 6dfded9 · 6dfded9
1 parent 9078e8c
commit 6dfded9
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/plugins/inlineStyles.js b/plugins/inlineStyles.js
@@ -293,7 +293,7 @@ export const fn = (root, params) => {
           return;
         }
 
-        // clean up matched class + ID attribute values
+        // clean up matched class values
         for (const selector of sortedSelectors) {
           if (selector.matchedElements == null) {
             continue;
@@ -333,23 +333,6 @@ export const fn = (root, params) => {
             } else {
               selectedEl.attributes.class = Array.from(classList).join(' ');
             }
-
-            // ID
-            const firstSubSelector = selector.node.children.first;
-            if (
-              firstSubSelector?.type === 'IdSelector' &&
-              selectedEl.attributes.id === firstSubSelector.name &&
-              !selectors.some((selector) =>
-                includesAttrSelector(
-                  selector.item,
-                  'id',
-                  firstSubSelector.name,
-                  true,
-                ),
-              )
-            ) {
-              delete selectedEl.attributes.id;
-            }
           }
         }
 

diff --git a/test/plugins/inlineStyles.16.svg.txt b/test/plugins/inlineStyles.16.svg.txt
@@ -27,7 +27,7 @@
 <svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 222 57.28">
     <defs/>
     <title>button</title>
-    <rect width="222" height="57.28" rx="28.64" ry="28.64" style="fill:#37d0cd;stroke:red"/>
+    <rect id="id0" width="222" height="57.28" rx="28.64" ry="28.64" style="fill:#37d0cd;stroke:red"/>
     <path d="M312.75,168.66A2.15,2.15,0,0,1,311.2,165L316,160l-4.8-5a2.15,2.15,0,1,1,3.1-3l6.21,6.49a2.15,2.15,0,0,1,0,3L314.31,168a2.14,2.14,0,0,1-1.56.67Zm0,0" transform="translate(-119 -131.36)" style="fill:#fff"/>
     <circle cx="33.5" cy="27.25" r="2.94" style="fill:#fff"/>
     <circle cx="162.5" cy="158.61" r="2.94" transform="translate(-181.03 61.15) rotate(-52.89)" style="fill:#fff"/>

diff --git a/test/plugins/inlineStyles.29.svg.txt b/test/plugins/inlineStyles.29.svg.txt
@@ -0,0 +1,20 @@
+inlineStyles plugin should not remove id attribute from target element.
+
+See: https://github.com/svg/svgo/issues/1486
+
+===
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+  <style>
+    #a {stroke:red;}
+  </style>
+  <path id="a" d="M 2 2 h10"/>
+  <use href="#a" x="5" y="5"/>
+</svg>
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+    <path id="a" d="M 2 2 h10" style="stroke:red"/>
+    <use href="#a" x="5" y="5"/>
+</svg>