Fabric.js: SVG letter-spacing is calculated wrongly

[teohhanhui]

Version

master @ 2a476e4 (did npm run build to build dist)

Test Case

https://fabricjs-issue-svg-letter-spacing.netlify.com/

Steps to reproduce

1. Load SVG which uses letter-spacing and transform

Expected Behavior

letter-spacing is not affected by transform

Actual Behavior

letter-spacing is affected by transform

Looks like a similar bug happened in Chrome before: https://stackoverflow.com/questions/36132450/chrome-v49-letter-spacing-in-svg-with-transform-matrix/36764459

[teohhanhui]

letter-spacing support was introduced in #3718

[asturur]

can you link the SVG?
fabric letterspacing is affected by transform. and it will be.

[teohhanhui]

You mean charSpacing, right? Then we cannot use it for SVG / CSS letter-spacing. At least not directly like it is now. Because that breaks SVG.

[teohhanhui]

Links to sample SVGs:

https://fabricjs-issue-svg-letter-spacing.netlify.com/svg/SN131.svg
https://fabricjs-issue-svg-letter-spacing.netlify.com/svg/SN404P-left.svg

[asturur]

So regarding:
letter-spacing is not affected by transform
I do not understand where this come from.

Letter spacing is affected by transform, indeed i put a scale 0.2 on the SVG and the letter-spacing is reduced to mantain proportions.

There are 2 bugs here:
1) fabric interprets the number as .em, while being without unit should be 5px.
2) at the moment of parsing the fontSize is considered 16px, that throws out calculations.

If we could know that at this point fontSize is 220px, this would parse correctly

[teohhanhui]

Sorry about my misunderstanding of the problem. And thanks for investigating! :)

[teohhanhui]

Anyway, I've just realized that in the sample SVGs I've provided, the letter-spacing CSS property has an invalid(?) value (it cannot be unit-less?), while the letter-spacing SVG attribute (which could be unit-less) is poorly supported: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/letter-spacing#Usage_Note

Seems like Adobe Illustrator generates invalid(?) values on SVG export.

EDIT: Looks like it's actually unclear whether unit-less values should be allowed in such cases: https://jwatt.org/svg/authoring/#specifying-units

[asturur]

well now works better!

[teohhanhui]

Indeed. But there's still another rendering issue in the second sample SVG. I'm not quite sure what's going on. It's around the multiple <tspan> with x and y attributes.

[asturur]

tspans are unsopperted yet