13

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

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

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

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

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

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

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

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

2 ответа 2

11

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

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

  1. Помещаем наш текст в <symbol></symbol>.

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="400">
  <symbol id="text">
    <text font-size="5em" text-anchor="middle" x="160" y="55">Some text</text>
  </symbol>
  <use xlink:href="#text"/>
</svg>

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="400">
  <symbol id="text">
    <text font-size="5em" text-anchor="middle" x="160" y="55">Some text</text>
  </symbol>
  <linearGradient id="grad">
    <stop offset="0%" stop-color="red"/>
    <stop offset="50%" stop-color="black"/>
    <stop offset="100%" stop-color="blue"/>
  </linearGradient>
  <use xlink:href="#text" fill="url(#grad)"/>
</svg>

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

Атрибут stroke-dashoffset определяет смещение stroke относительно начального положения

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400" height="100">
  <symbol id="text">
    <text text-anchor="middle" x="160" y="55">Some text</text>
  </symbol>
  <linearGradient id="grad">
    <stop offset="0%" stop-color="red"/>
    <stop offset="60%" stop-color="black"/>
    <stop offset="100%" stop-color="blue"/>
  </linearGradient>
  <use xlink:href="#text" stroke-dashoffset="0" stroke-dasharray="10 15" fill="none" stroke-width="3" stroke="url(#grad)" font-size="5em">
    <animate attributeName="stroke-dashoffset" values="250;0" dur="7s" repeatCount="indefinite"/>
  </use>
</svg>

  1. Можно приступать к самому "гусеничному" эффекту. Мы должны наложить текст на текст и изменить атрибуты 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;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/2000/svg" version="1.1">
  <symbol id="stroke-dash">
    <text text-anchor="middle" x="50%" y="50%">Stroke</text>
  </symbol>
  <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#05a"/>
    <stop offset="100%" stop-color="#0a5"/>
  </linearGradient>
  <use xlink:href="#stroke-dash" stroke="url(#linear)" stroke-dasharray="10 1" stroke-width="3" stroke-dashoffset="0" font-size="4em">
    <animate attributeName="stroke-dashoffset" values="250;0" dur="15s" repeatCount="indefinite"/>
  </use>
  <use xlink:href="#stroke-dash" stroke="url(#linear)" stroke-dasharray="10 15" stroke-width="3" stroke-dashoffset="0" font-size="4em">
    <animate attributeName="stroke-dashoffset" values="250;0" dur="15s" repeatCount="indefinite"/>
  </use>
</svg>

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

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

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

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

<link href='https://fonts.googleapis.com/css?family=Cabin+Condensed:700' rel='stylesheet' type='text/css'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <defs>
    <pattern id="pattern" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle id="circle" cx="5" cy="5" r="5" fill="#000"/>
    </pattern>
  </defs>
  <rect x="0" y="0" width="250" height="250" fill="url(#pattern)"/>
</svg>

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

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

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

.red {
  fill: red;
}

.blue {
  fill: blue;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/2000/svg" version="1.1" height="150" width="150">
  <defs>
    <pattern id="strokeEffect" width="1" height="3" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
      <rect x="0" y="0" width="1" height="1" fill="#fff"/>
    </pattern>
    <mask id="mask">
      <rect height="100%" width="100%" style="fill: url(#strokeEffect)"/>
    </mask>
  </defs>
  <rect class="stripes red" y="0"/>
  <rect class="stripes" y="50"/>
  <rect class="stripes blue" y="100"/>
</svg>

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

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

body {
  background-color: #2e2e2e;
}
<link href='https://fonts.googleapis.com/css?family=Cabin+Condensed:700' rel='stylesheet' type='text/css'>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="620" height="500">
  <defs>
    <pattern id="strokeEffect" width="1" height="3" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
      <rect x="0" y="0" width="1" height=".8" fill="#ffffff"/>
    </pattern>
    <text id="text" x="250" y="100" font-size="5em" text-anchor="middle" letter-spacing="15" font-family="'Cabin Condensed'">Some text</text>
    <mask id="mask">
      <rect x="0" y="0" width="100%" height="100%" fill="#fff"/>
      <use x="-6" y="-6" stroke="#000" stroke-width="5" xlink:href="#text" opacity="1" fill="#000"/>
    </mask>
  </defs>
  <use x="6" y="6" xlink:href="#text" opacity="1" fill="url(#strokeEffect)" mask="url(#mask)"/> 
  <use x="0" y="0" xlink:href="#text" fill="#fff"/>
</svg>

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

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

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;
  }
}
<link href='https://fonts.googleapis.com/css?family=Cabin+Condensed:700' rel='stylesheet' type='text/css'>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="575px" height="120px" viewBox="0 0 575 120" xml:space="preserve">
  <defs>
    <pattern id="water" width=".25" height="1.1" patternContentUnits="objectBoundingBox">
      <path fill="white" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"/>
    </pattern>
    <text id="text" transform="matrix(1 0 0 1 -8 117)" font-family="'Cabin Condensed'" font-size="161">LOADING</text>
    <mask id="text_mask">
      <use xlink:href="#text" fill="white"/>
    </mask>
  </defs>
<rect class="water-fill" mask="url(#text_mask)" fill="url(#water)" width="1600" height="120"/>
</svg>

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

    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;
  }
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="water" width="0.25" height="1" patternContentUnits="objectBoundingBox">
      <path fill="dodgerblue" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"/>
    </pattern>
  </defs>	
  <!--New (width)-->
  <rect class="water-fill" fill="url(#water)" width="400" height="120"/>
</svg>

5
  • 1
    Отлично.............
    – Air
    23 мар 2018 в 21:05
  • @Air, остальное не смог вместить из-за достаточно большого объема
    – Arthur
    23 мар 2018 в 21:11
  • @St1myL Солидно. Отличные примеры. Думаю многие, кто интересуются svg, захотят повторить, что-то сделать на основе этого для себя. 23 мар 2018 в 21:30
  • @Alexandr_TT, конечно, только за, если люди будут интересоваться этим направлением:))
    – Arthur
    23 мар 2018 в 21:31
  • 1
    @St1myL, а ты закинь в codepen ссылку сюда....
    – Air
    23 мар 2018 в 21:58
10

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

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


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

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

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

<image xlink:href="https://i.stack.imgur.com/6HVU6.jpg" width="400" height="300"/>

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

    <path d="M350 280a400 400 0 0 0 4 -150a100 60 0 1 0 -14 4a400 400 0 0 1 10 146z"/>

  • Добавляем текст внутрь контура. К сожалению в svg нет автоматического переноса текста, как в HTML, но есть возможность ручного переноса текста с помощью атрибута <tspan>

  • При необходимости делаем более тонкую регулировку размера, позиции контейнера и текста

    <g transform="scale(1.1) translate(-40 0)" >

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;
}
<link href='https://fonts.googleapis.com/css?family=Lobster|Raleway' rel='stylesheet' type='text/css'>
<link href="google-font.css" rel="stylesheet" type="text/css">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 300" preserveAspectRatio="xMinYMin meet">
  <image xlink:href="https://i.stack.imgur.com/6HVU6.jpg" width="400" height="300"/>
  <g transform="scale(1.1) translate(-40 0)">
    <path stroke-miterlimit="50" d="M350 280a400 400 0 0 0 4 -150a100 60 0 1 0 -14 4a400 400 0 0 1 10 146z"/>
    <text>
      <tspan x="302" y="60">Вы вызываете</tspan>
      <tspan x="302" y="85">больше проблем,</tspan>
      <tspan x="302" y="110">чем пользы.</tspan>
    </text> 
  </g>
</svg>

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

1
  • 3
    Интересный вариант!
    – Arthur
    24 мар 2018 в 8:20

Ваш ответ

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

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