Chrome v49 letter spacing in SVG with conversion matrix

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

enter image description here

Life 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 something wrong here (for example, breaking some specifications) and Chrome has become more "restrictive" or is it a recently introduced bug in Chrome?

FYI:. An example (obviously) is just a small part of the larger SVG that is dynamically generated by the server, and I can't just change the nesting and usage of the transformation matrix and translate the functions.

+5
source share
1 answer

I had the same problem, and even if I could not find anything about this problem in the change log, it seems to be fixed in Chrome 50.

+1
source

Source: https://habr.com/ru/post/1245487/


All Articles