Как преобразовать текст в обводку в illustrator?

Question

[HamSter]

Есть adobe illustrator. Есть текст в нем:



И есть такая анимация для svg:

svg path {
  fill:none; 
  stroke:#000;
  animation: dash 5s linear forwards; 
  stroke-dashoffset: 1000;
  stroke-dasharray: 1000;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

Задача: анимировать stroke-dashoffset от 1000 до 0. Но чтобы сам текст был обводкой, а не обводка вокруг него. (Извините за формулировку).



Т.е. должно быть так: codepen пример1, codepen пример2.

Вопрос: Как в illustrator преобразовать текст в обводку (stroke) подобно примерам? Толщина шрифта соответственно должна регулироваться stroke-width.

Answer 1

[Нерон Лордов]

Выбираешь текст, жмешь CTRL + SHIFT + O или Type -> Create outlines

Далее убираешь заливку и применяешь Stroke, с настройкой Inside, и увеличиваешь его значение пока текст не будет выглядеть полностью залитым

Comments

[HamSter]

Супер, но почему-то та же ерунда и остается в браузере! Сохраняю по правилам:



В иллюстраторе буквы не объединены в группы:



Но на выходе:

[Нерон Лордов]

HamSter, скорее всего, как говорил RAX7, тебе придётся использовать контур букв в качестве маски, а уже внутрь него пихнуть линию с такой толщиной обводки, чтобы она заполняла маску полностью. Основная сложность - создание такой единой линии, которая 1) будет равноудалена от краев букв внутри этих самых краев, 2) будет описывать все изгибы букв без разрыва.

[HamSter]

Нерон Лордов, спасибо за помощь, попробую еще и так)

Answer 2

[RAX7]

В этом примере обводка по моему вообще вручную нарисована

Загагулина

красным - анимированная обводка
черным - маска

Comments

[HamSter]

да, там похоже перо! А у меня наверное с иллюстратором какие-то траблы, потому что и перо сохраняет как-то не правильно (

[RAX7]

HamSter, обводку у пера по центру поставь

[HamSter]

RAX7, вот перо с линией по центру



Сохраняю svg, в браузере открываю и все наоборот ))))

[RAX7]

HamSter,

попробуй так

[HamSter]

RAX7, экспорта ресурсов у меня нет, видимо старенькая версия cs6 ))). Спасибо за помощь!