Стилизация и анимация текста SVG

#html #css #css3 #svg #анимация

Хотелось бы рассмотреть ряд примеров стилизации текста и как использовать pattern
& mask в связке с какими-то эффектами.

1. "Гусеничный" stroke (linearGradient & animate):



2. Текст, отбрасывающий от себя тень из диагональных линий (pattern & mask):



3. Заполнение текста водой (SVG(pattern & mask) & CSS(@keyframes)):



P.S. В данном вопросе присутствуют примеры, взятые из открытого доступа(2 и 3). Вопрос
создан с целью привлечь к SVG и показать его возможности.
    

Ответы

Ответ 1

Добавление и стилизация svg текста в растровую картинку

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



 

Пошаговая инструкция:  


Добавляем растровую картинку в SVG   


    


Рисуем в векторном редакторе контур, где будет расположен текст   

 
Добавляем текст внутрь контура. К сожалению в svg нет автоматического
переноса текста, как в HTML, но есть возможность ручного переноса
текста с помощью атрибута     
При необходимости делаем более тонкую регулировку размера, позиции
контейнера и текста  






svg {
  width: 40%;
  height: 40%;
}

text {
  font-family: Lobster;
  font-size: 24px;
  text-anchor: middle;
  fill: #474447;
}

path {
  fill: #fff;
  stroke: #474447;
  stroke-width: 2;
}







Картинка и текст адаптивны.
Работает во всех современных браузерах + IE11, Edge


Ответ 2

Постепенно будем рассматривать и создавать подобные примеры.

Первый пример


Помещаем наш текст в .



  Элемент  используется для определения объектов графического шаблона, которые
могут быть созданы элементом 










Делаем произвольный gradient с помощью .Думаю здесь
всё понятно, его можно подключать к различным элементам холста. В данном примере мы
"залили" фон текста gradient'ом, но это не всё, что он может. Мы можем применить gradient
для stroke и не только.










"Нарисуем" контур для текста. Также попробуем изменять атрибут stroke-dashoffset
с помощью .



  Атрибут stroke-dashoffset определяет смещение stroke относительно начального положения
  
  Атрибут stroke-dasharray имеет от 2х и больше значений. Первое значение определяет
длину линии, а второе - пробел между линиями










Можно приступать к самому "гусеничному" эффекту. Мы должны наложить текст на текст
и изменить атрибуты stroke-dashoffset & stroke-dasharray.

Первый пример готов:




@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Open Sans;
  text-transform: uppercase;
  letter-spacing: 5px;
}





Второй пример

P.S. В данном примере мы ознакомимся с pattern & mask.


Попробуем использовать pattern на любом квадрате, заполнив его кругами:



  pattern можно использовать в качестве заливки или обводки для различных элементов,
будь то текст, фигуры или изображения.











Теперь опробуем pattern & mask. 



  mask в нашем контексте является поверхностным слоем, который скрывает часть контента.




.stripes {
  width: 100px;
  height: 50px;
  mask: url("#mask");
}

.red {
  fill: red;
}

.blue {
  fill: blue;
}






Воссоздадим второй пример, используя вышеперечисленное.

Второй пример готов:




body {
  background-color: #2e2e2e;
}






Третий пример


Первым делом рассмотрим код:




body {
  background: #141414;
  text-align: center;
}

.water-fill {
  -webkit-animation: wave 0.7s infinite linear, fill-up 10s infinite ease-out alternate;
  animation: wave 0.7s infinite linear, fill-up 10s infinite ease-out alternate;
}

@-webkit-keyframes wave {
  0% {
    x: -400px;
  }
  100% {
    x: 0;
  }
}

@keyframes wave {
  0% {
    x: -400px;
  }
  100% {
    x: 0;
  }
}

@-webkit-keyframes fill-up {
  0% {
    height: 0;
    y: 130px;
  }
  100% {
    height: 160px;
    y: -30px;
  }
}

@keyframes fill-up {
  0% {
    height: 0;
    y: 130px;
  }
  100% {
    height: 160px;
    y: -30px;
  }
}







Делаем выводы:)

2.1. Происходит смещение pattern по оси X.

2.2. Эффект волны происходит за счёт ширины rect, которая равна 1600 и отрицательному
смещению по оси X от -400 до 0. Мы можем поэкспериментировать, то есть изменить значения
и посмотреть что выйдет:

P.S. Результат не впечатляет, думаю вы разобрались почему так происходит. Если нет,
значит вот краткий ответ: Мы делаем шире rect, в то время как pattern"подстраивается"
под эту ширину, после этого мы смещаем rect по оси X.

2.3. Далее мы вставляем его в mask, voilà, эффект волны для текста готов:)




.water-fill {
  animation: wave 0.7s infinite linear, fill-up 10s ease-out alternate;
}

@keyframes wave {
  0% {
      /*New*/
    x: -200px;
  }
  100% {
    x: 0;
  }
}

@keyframes fill-up {
  0% {
    y: 120px;
    height: 0;
  }
  100% {
    y: 0;
    height: 120px;
  }
}