CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have read and followed the Issue Tracker Guide
• I have searched and referenced existing issues and discussions
• I am filing a BUG report.
• I have managed to reproduce the bug after upgrading to the latest version
• I have created an accurate and minimal reproduction

Version

6.6.4

In What environments are you experiencing the problem?

Chrome

Node Version (if applicable)

None

Link To Reproduction

https://codesandbox.io/p/devbox/fabric-vanillajs-sandbox-forked-qphrsv

Steps To Reproduce

1. Parse an SVG document with at least 2 non-empty <style> tags.

Expected Behavior

When parsing an SVG document, the rules in every <style> tag will be applied to the resulting Fabric.js objects.

For example, parsing the SVG:

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    .blue { fill: blue; }
  </style>
  <style>
    .red { fill: red; }
  </style>
  <circle class="blue" r="45" cx="50" cy="50"></circle>
  <circle class="red" r="45" cx="150" cy="50"></circle>
</svg>

should result in the following Fabric.js circles (when rendered on a canvas):

Actual Behavior

Any rules outside of the first <style> tag don't appear in the resulting Fabric.js objects.

For example, parsing the SVG:

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    .blue { fill: blue; }
  </style>
  <style>
    .red { fill: red; }
  </style>
  <circle class="blue" r="45" cx="50" cy="50"></circle>
  <circle class="red" r="45" cx="150" cy="50"></circle>
</svg>

results in the following Fabric.js circles (when rendered on a canvas)::

The .red class defined in the second <style> tag is ignored.

Error Message & Stack Trace