Как расположить текст полукругом поверх изображения?

#javascript #css3 #html5 #svg

Подскажите, как можно сделать как на картинке, текст полукругом поверх изображения?
    

Ответы

Ответ 1

Чтобы получить Path, вдоль которых будет размещен текст, необходимо выполнить следующие
шаги:  


Ваша картинка имеет размеры 540 х 571px Для загрузки изображения в
векторный редактор создаем небольшой SVG файл.  




	 





В векторном редакторе с помощью инструмента - Рисовать кривые Безье
(цифра 1 на рисунке) добавляем узловые точки по траектории линии
текста  
Сменяем тип узлов на автоматически сглаженные- цифра 2 на рисунке 
Рычагами управления узловых точек добиваемся  нужной формы траектории (цифра 3)

  
Сохраняем файл в формате *.svg и забираем из него три `, для размещения трёх  полукруглых
текстов.  


Ниже полный код: 



.container {
 width:50%;
 height:50%;
 }


 
 




Update  

Чтобы сделать приложение адаптивным, убрал из шапки файла width="540" height="571"
и обернул SVG в контейнер , размеры, которого заданы в процентах. 

Благодаря этому приложение адаптивно и работает во всех браузерах, включая IE, Edge   

Пример анимации текста

Этот бонус дополняет ответ, чтобы показать, что есть и такая возможность анимации
текста.    

Основная идея использовать атрибут SVG текста startOffset - отступ текста от начала
пути, вдоль которого он расположен.
При startOffset="100%" текст не виден.        

Изменяя этот атрибут от 100% до минимума можно получить анимацию появления текста.   



Анимация начинается при наведении курсора на изображение:       



.container {
 width:50%;
 height:50%;
 }





   


Последовательность выполнения анимаций достигается цепочкой условий в
атрибуте -   

begin="an1.end" Эта запись означает, что вторая анимация начнется
после окончания первой анимации с id=an1
restart="whenNotActive" - защита от повторных запусков анимации,
пока она не дойдёт до конца.


Ответ 2

Еще можно воспользоваться javascript для этого: =)
















Ответ 3

Тут основное ударение на textPath

Но для начала открываем любой векторный редактор - в моём случае я открыл inkscape
так как очень привык к нему 

И рисуем обычный изогнутый path 



Далее пишем текст , я просто скопипастил заголовок и вставил через text 

Зажимаем shift и выделяем и кривую и текст и в меню текст находим пункт Разместить
по контуру 

Ну и собственно всё - текст кривой 

Сохраняем как простой SVG или как Оптимизированный svg 

Если что то не ясно я дополню ответ










Подобный пример т.е отсебячина