Chrome v49 broke letter-spacings
in SVG when used in combination with matrix transformation and translations:
Living example: https://jsfiddle.net/75fpn6de/6/
SVG:
<svg height="300px" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(0.20695652173913043,0,0,0.20695652173913043,0,10.881739130434767)">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" viewBox="0 0 2500 2794" width="2500" height="2794">
<g transform="translate(1436.5 1087) rotate(0)">
<text xmlns="http://www.w3.org/2000/svg" fill="#ed7373" y="237" style="font-family: 'Great Vibes';" font-size="237" letter-spacing="0.1em" text-anchor="middle">Some text</text>
</g>
</svg>
</g>
</svg>
CSS:
@import url(https://fonts.googleapis.com/css?family=Great+Vibes);
Am I doing anything wrong here (like breaking some specs) and Chrome got more "restrictive" or is it a newly introduced bug in Chrome?
FYI: The example is (obviously) only a small part of a bigger SVG which is dynamically generated by the server and I can't just change the nesting and the usage of the transform matrix & translate functions.
I had the very same issue, and even if I couldn't find anything about this issue in the changelog, it seems it has been fixed in Chrome 50.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With