1

Нужно сделать эффект заполнения цветом одной буквы, как на гифке.
Кроме, как заполнить градиентом, я не придумал, как это сделать, но проблема в том, что transition не работает на linear-gradient, keyframes тоже не делает анимацию с градиентом, я решил использовать SVG анимацию, но если туда просто прописать значения градиента то он не работает, как это реализовать?

https://jsfiddle.net/morskaya_ulitochka/1k7bjwzs/17/

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

5
  • Что означает - вытекающего текста? Текст должен анимироваться относительно прямоугольника? или анимация заполнения цветом самих букв? 9 мар 2021 в 9:15
  • Сделайте два градиента в одном, анимируйте позицию фона (background-position).
    – NoSkill
    9 мар 2021 в 9:28
  • @Alexandr_TT анимация заполнения цветом самих букв
    – Artyom
    9 мар 2021 в 9:45
  • @Artyom Заполнение букв сверху-вниз? 9 мар 2021 в 9:50
  • @Alexandr_TT сперва буква белая, в конце чёрная с белой обводкой
    – Artyom
    9 мар 2021 в 10:06

1 ответ 1

5

Эффект достигается анимацией атрибута offset линейного градиента:

 <stop offset="0" stop-color="black">
        <animate begin="svg1.click" dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
      </stop>

Заполнение цветом сверху-вниз

Анимация начнется после клика

#txt {
stroke:white;
stroke-width:4px;
font-size:100px;
font-weight:bold;
font-family:verdana;
text-anchor:middle;
alignment-baseline:central;
fill:url(#top_bottom);
}
<svg id="svg1"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="300" height="300" viewBox="0 0 300 300" style="background-color:#111111" >  
 <defs>
    <linearGradient id="top_bottom" x1="0" y1="0" x2="0" y2="100%">
      <stop offset="0" stop-color="black">
        <animate begin="svg1.click" dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
      </stop>
      <stop offset="0" stop-color="white">
        <animate begin="svg1.click" dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
      </stop>
      
    </linearGradient>
  </defs>        

<text id="txt" x="50%" y="50%">TEXT </text>
</svg>   

Заполнение цветом слева-направо

#txt {
stroke:white;
stroke-width:4px;
font-size:100px;
font-weight:bold;
font-family:verdana;
text-anchor:middle;
alignment-baseline:central;
fill:url(#left_right);
}
<svg id="svg1"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="300" height="300" viewBox="0 0 300 300" style="background-color:#111111" >  
 <defs>
    <linearGradient id="left_right" x1="0" y1="0" x2="100%" y2="0">
      <stop offset="0" stop-color="black">
        <animate begin="svg1.click" dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
      </stop>
      <stop offset="0" stop-color="white">
        <animate begin="svg1.click" dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
      </stop>
      
    </linearGradient>
  </defs>        

<text id="txt" x="50%" y="50%">TEXT </text>
</svg>   

Анимация заполнением градиентом только одной буквы

Используется теги <tspan>X</tspan>, чтобы разбить слово на буквы и применить анимацию только к одной букве

#txt {
stroke:white;
fill:white;
stroke-width:4px;
font-size:90px;
font-weight:bold;
font-family:verdana;
/*fill:url(#top_bottom);*/
}
tspan#x {
fill:url(#top_bottom);
}
<svg id="svg1"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="300" height="300" viewBox="0 0 300 300" style="background-color:#111111" >  
 <defs>
    <linearGradient id="top_bottom" x1="0" y1="0" x2="0" y2="100%">
      <stop offset="0" stop-color="black">
        <animate begin="svg1.click" dur="2s" attributeName="offset" fill="freeze" from="0" to="1"  />
      </stop>
      <stop offset="0" stop-color="white">
        <animate begin="svg1.click" dur="2s" attributeName="offset" fill="freeze" from="0" to="1"  />
      </stop>
      
    </linearGradient>
  </defs>        

<text id="txt" x="10" y="180">
  <tspan >TE</tspan>
   <tspan id="x" dx="-20">X </taspan>
   <tspan dx="-20" fill="white">T</tspan> 

</text>
</svg>   

Бесконечное повторение repeatCount="indefinite"

#txt {
stroke:white;
fill:white;
stroke-width:4px;
font-size:90px;
font-weight:bold;
font-family:verdana;

}
tspan#x {
fill:url(#top_bottom);
}
<svg id="svg1"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="300" height="300" viewBox="0 0 300 300" style="background-color:#111111" >  
 <defs>
    <linearGradient id="top_bottom" x1="0" y1="0" x2="0" y2="100%">
      <stop offset="0" stop-color="black">
        <animate begin="svg1.click" dur="2s" attributeName="offset" fill="freeze" from="0" to="1" repeatCount="indefinite" />
      </stop>
      <stop offset="0" stop-color="white">
        <animate begin="svg1.click" dur="2s" attributeName="offset" fill="freeze" from="0" to="1" repeatCount="indefinite" />
      </stop>
      
    </linearGradient>
  </defs>        

<text id="txt" x="10" y="180">
  <tspan >TE</tspan>
   <tspan id="x" dx="-20">X </taspan>
   <tspan dx="-20" fill="white">T</tspan> 

</text>
</svg>   

Вариант интересного эффекта

#txt {
stroke:white;
fill:white;
stroke-width:4px;
font-size:90px;
font-weight:bold;
font-family:verdana;

}
tspan#x {
fill:url(#top_bottom);
}
<svg id="svg1"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="300" height="300" viewBox="0 0 300 300" style="background-color:#111111" >  
 <defs>
    <linearGradient id="top_bottom" x1="0" y1="0" x2="0" y2="100%">
      <stop offset="0" stop-color="black">
        <animate begin="svg1.click" dur="2s" attributeName="offset" fill="freeze" from="0" to="1" repeatCount="indefinite" />
      </stop>
      <stop offset="0" stop-color="white">
        <animate begin="svg1.click" dur="2s" attributeName="offset" fill="freeze" from="0" to="1"  />
      </stop>
      
    </linearGradient>
  </defs>        

<text id="txt" x="10" y="180">
  <tspan >TE</tspan>
   <tspan id="x" dx="-20">X </taspan>
   <tspan dx="-20" fill="white">T</tspan> 

</text>
</svg>   

7
  • Саша там скриншот... я ему сделал на тостере одну букву ...но он молчит 9 мар 2021 в 10:39
  • 1
    классно..но больше одного плюса я не смогу поставить 9 мар 2021 в 11:34
  • Саша закрой вопрос и всё 9 мар 2021 в 11:43
  • Кстати доклад Джейка Арчибальда видел ? 9 мар 2021 в 11:43
  • 1
    там видео: youtube.com/watch?v=cCOL7MC4Pl0&t=1303s если eng знаешь - то сможешь узнать полезное 9 мар 2021 в 11:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.