fix(): svg parsing logic with use and style

[gloriousjob]

Description

style tags between a path and use tag don't seem to work properly compared to Chrome. In Chrome, when both have a style, the path has priority but merges with the use tag where they do not share styles. Previously, fabric would take the use tag's style wholesale. This PR merges the two when both exist and tests were added to verify the both case and cases where only one has a style.

Closes #9840

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[asturur]

Did you find this priority described somewhere or you just checked how a browser behave?

[asturur]

Could this be:

Suggested change

	const mergedStyles = Object.keys(styleRecord).reduce(
	(a, v) => a + v + ':' + styleRecord[v] + ';',
	''
	);
	const mergedStyles = Object.entries(styleRecord).map(entry => entry.join(':')).join(';');

?

[gloriousjob]

That’s easier to interpret than what I made. Pushed.

[gloriousjob]

Did you find this priority described somewhere or you just checked how a browser behave?

I tested the browser and tried different settings. The three tests I came up with show how they acted in chrome. The SVG docs were not clear about how this case should be handled from what I saw.

[asturur]

Firefox, Safari and Chrome behave the same.
Style gets merged and priority is given to the original element.

Same for attributes.
I'll be sure to revisit our parsing logic to be sure we do same