4

Имеется вот такой переливающийся текст на основе linear-gradient сделанный в svg , но так же заметил погрешности ...наглядно :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 93 40">
  <defs>
    <linearGradient  id="linearGradient914">
      <stop id="stop910"
         offset="0"
         style="stop-color:yellow;" />
      <stop  id="stop912"
         offset="1"
         style="stop-color:red;" />
    </linearGradient>

&lt;linearGradient
   gradientUnits="userSpaceOnUse"
   y2="168.58255"
   x2="-127.96807"
   y1="168.58255"
   x1="-227.84294"
   id="linearGradient916"
   xlink:href="#linearGradient914" /&gt;



</defs>
  <g  transform="translate(210.09778,-163.31157)"  id="layer1">
    <text  transform="scale(0.92185611,1.084768)" id="text817" y="178.24792" x="-228.11203"  style="font-size:41px;line-height:41px;">
  <tspan style="font-family:Gabriola;fill:url(#linearGradient916);" y="178.24792"  x="-228.11203"  id="tspan815">свобода</tspan>
 </text>
  </g>
</svg>

как видно у текста рваные края как будто это растровая графика в Google Chrome но в Firefox и в IE11 этого нету...

Что нужно сделать что бы этого не было в Google Chrome ?

введите сюда описание изображения

  • ассоциация : https://stackoverflow.com/q/51210969/6339052 –  Jul 06 '18 at 13:33
  • 1
    Что-то не вижу никаких краёв – Arthur Jul 06 '18 at 17:12
  • @Arthur я скрин выложил –  Jul 06 '18 at 19:32
  • Странно, у меня нет такого. С любым текстом пробовал – Arthur Jul 06 '18 at 19:44
  • @Arthur у тебя Габриола установлен в системе ? –  Jul 06 '18 at 19:45
  • конечно, у меня нет такого – Arthur Jul 06 '18 at 19:55
  • @Arthur с любым текстом и с любым шрифтом –  Jul 06 '18 at 20:13
  • Тоже не вижу таких краёв https://jsfiddle.net/p4g36zwm/embedded/result,html,js,css/ – Андрей ProjectSoft Jul 06 '18 at 20:21
  • @АндрейProjectSoft я же скриншот не выдумал же...чё косяк у меня одного ? –  Jul 06 '18 at 20:22
  • @МаксимЛенский я понимаю. Но не скриншот с данного мною примера. Что может быть. 1 - Косячный шрифт в системе. Попробуйте удалить его. Чтобы не ставить все шрифты в систему, я пользуюсь FontMassive менеджером. Удалив шрифт перезапустить браузер и проверить по ссылке на фидле. Если косяка нет, то скачать подгружаемый шрифт. Файл стилей шрифта там есть – Андрей ProjectSoft Jul 06 '18 at 20:45
  • @АндрейProjectSoft я на SO дополнил а здесь забыл - в общем я менял семейство шрифта и размер и даже убрал градиент оставил просто сплошную заливку - как была лесенка так и осталась –  Jul 06 '18 at 20:47
  • Попробуйте удалить шрифт из системы. Ссылка на FontMassive https://yadi.sk/d/vd2hZ5jztxo3m Очень удобно инициализировать определённый набор под проект. Особенно при работе с Adobe PhotoShop, Illustrator, etc – Андрей ProjectSoft Jul 06 '18 at 20:50
  • Мой скриншот http://take.ms/qdFGF – Андрей ProjectSoft Jul 06 '18 at 20:56

1 Answers1

1

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