I'm encountering an issue while parsing SVG files using node-html-parser. Specifically, when manipulating SVG elements that have a design-color attribute defined, I use node.setAttribute('fill', color); to dynamically set their fill colors.
However, when the SVG elements initially contain an empty class attribute (e.g., class=" "), the library processes these elements in such a way that the output has a malformed class attribute. Instead of maintaining class="" or removing the empty class attribute, the output contains just class without any value or quotation marks, as shown below:
Processed SVG Element (Incorrect):
<polygon points="-235.18 1571.95 1014.73 1284.4 1083.46 1590.1 -166.45 1877.65 -235.18 1571.95" fill="#ff8200" class design-color="primary"></polygon>
This results in parsing issues, as browsers like Safari and Chrome do not properly recognize SVG elements with class attributes formatted in this manner.
As a temporary workaround, I am explicitly setting the class attribute with a space (node.setAttribute('class', " ");) to avoid this issue. However, this is not ideal and could lead to further complications or inconsistencies in handling SVG content.
Could you please look into this issue and provide a fix or guidance on how to properly handle empty class attributes without resorting to workarounds that may not be semantically correct?
I'm encountering an issue while parsing SVG files using node-html-parser. Specifically, when manipulating SVG elements that have a design-color attribute defined, I use node.setAttribute('fill', color); to dynamically set their fill colors.
However, when the SVG elements initially contain an empty class attribute (e.g., class=" "), the library processes these elements in such a way that the output has a malformed class attribute. Instead of maintaining class="" or removing the empty class attribute, the output contains just class without any value or quotation marks, as shown below:
Original SVG Element:
<polygon points="-235.18 1571.95 1014.73 1284.4 1083.46 1590.1 -166.45 1877.65 -235.18 1571.95" fill="#ff8200" class="" design-color="primary"></polygon>Processed SVG Element (Incorrect):
<polygon points="-235.18 1571.95 1014.73 1284.4 1083.46 1590.1 -166.45 1877.65 -235.18 1571.95" fill="#ff8200" class design-color="primary"></polygon>This results in parsing issues, as browsers like Safari and Chrome do not properly recognize SVG elements with class attributes formatted in this manner.
As a temporary workaround, I am explicitly setting the class attribute with a space (
node.setAttribute('class', " ");) to avoid this issue. However, this is not ideal and could lead to further complications or inconsistencies in handling SVG content.Could you please look into this issue and provide a fix or guidance on how to properly handle empty class attributes without resorting to workarounds that may not be semantically correct?
Thank you for your attention to this matter.