Как преобразовать текст в svg?

Question

[WingRS]

Нужно как-то преобразовать текст в илюстраторе в свг чтобы в коде pth была stroke?

Answer 1

[Антон Мудренок]

И понял ваш вопрос, и не понял одновременно.

Преобразовать текст в кривые так: https://www.youtube.com/watch?v=LYA-zNDRnmo
Потом выбираете ваш объект, убираете у него fill и добавляете stroke.

Comments

[WingRS]

fill заменить на stroke, так?

[WingRS]

задача стоит такая: сделать анимацию лого такую как здесь mahno.com.ua, но не могу понять как... там нужно через stroke-fill

[Антон Мудренок]

WingRS:
это обычная css анимация над svg объектом path:
i.piccy.info/i9/0812f3542c4e58f361717d1d90ea8b7e/1...
fill в таком случае убирать не надо, просто изначально у него opacity: 0

[WingRS]

Антон Мудренок: тогда так: мне проделать то что на видео, залить и прописать анимацию? извини, не очень понимаю

[Антон Мудренок]

WingRS: пишете текст, потом как на видео его переводите в кривые, потом сохраняетесь в svg. Вставляете все это добро в ваш сайт и там уже анимируете нужные свойства.
https://css-tricks.com/svg-line-animation-works/

[WingRS]

Добавил как вы сказали, попробовал добавить анимацию, но ничего не происходит.
нужно ведь просто чтобы нарисовались буквы. тогда через .path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}

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

[Антон Мудренок]

WingRS: И что такое .path? Это какой-то класс? Я же не знаю что и почему у вас не работает. Я вам дал 2 источника в которых все расписано, изучайте.

[WingRS]

Все получилось, спасибо!