Как исправить отсутствие antialiasing-а у текста с градиентной заливкой в SVG в Chrome?

Question

[Максим]

Имеется SVG в котором текст сделан с заливкой градиентом, в IE 11 , Firefox и Edge всё нормально отображается, но вот Google Chrome как всегда компостирует мозги - у текста отсутствует сглаживание краёв.
Код: https://jsfiddle.net/45ws1fyh/

Вопрос задал на ru.stackoverflow.com и так же на stackoverflow.com ответов Ноль

Как вылечить или что сделать, чтобы не было этого дефекта в Google Chrome ?

Comments

[Moskus]

А если тот же самый градиент - не на тексте?
А если текст - без transform-ов и прочего?

[forspamonly2]

наверное что-то платформенно-зависимое. у меня в хроме всё ровно, с антиалиасингом.

[Максим]

Moskus, я код показал вроде бы - скажите есть ли косяк в нём ?

[Максим]

forspamonly2, я под windows щас - даже не смотрел в linux а Яблока нету ..

[Moskus]

Максим Ленский, я вам советую потенциально полезный эксперимент для изоляции проблемы, а вы пытаетесь все свести к анализу кода. Это непродуктивно.

[Максим]

Moskus, что надо сделать ?

[Максим]

Moskus, кстати спс за правку - смотрится лучше

[Moskus]

Максим Ленский, ну так я вам уже написал.
Попробуйте тот же градиент, но на тексте, который превращен в кривые. Если проблема со сглаживанием исчезнет, значит - проблема в рендеринге текста и его нужно превращать в кривые.
Попробуйте текст без градиента, со сплошной заливкой - если проблема исчезнет, то она - в использовании градиентной заливки и ее можно попробовать обойти, используя текст, как clip path для другого объекта с градиентной заливкой.
Попробуйте также избавиться от transform/scale и посмотреть, не исчезнет ли проблема.

Собственно, в последовательном устранении отдельных составляющих ситуации и анализе результата и состоит процесс отладки и поиска конкретной причины проблемы, почти всегда.

[Максим]

Moskus, спс - поочерёдно ...потом отпишусь

Answer 1

[Максим]

Перевёл шрифт в кривые Безье и текст градиентом стал отображаться отлично, в поиске решения помог Moskus,