CODEWITHSUNDEEP
google-chromesvgletter-spacing
suamikim
suamikim

Reputation: 5319

Chrome v49 letter-spacing in SVG with transform matrix

Chrome v49 broke letter-spacings in SVG when used in combination with matrix transformation and translations:

enter image description here

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.

Upvotes: 5

Views: 174

Answers (1)

Zed-K
Zed-K

Reputation: 999

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.

Upvotes: 1

Related Questions