Как сделать анимацию SVG текста вокруг многоугольника

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

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

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

Например, чтобы такие разные фразы, как:


Текст шестиугольника
Текст вокруг шестиугольника 
Весь текст целиком вокруг шестиугольника


Одинаково равномерно размещались вокруг сторон шестиугольника без перекрытия начала
и конца фразы.  

Далее, необходимо сделать анимацию текста вокруг шестиугольника. 







    

Ответы

Ответ 1

Чтобы разместить текст целиком вокруг фигуры необходимо узнать длину пути, то есть
длину периметра сторон многоугольника.
Для нашего примера длина периметра многоугольника будет равна 760px
Чтобы конец текстовой фразы не перекрывал символы начала и был гарантированный промежуток
между ними,- установим textLength="700"  

Теперь для текста применим атрибут lengthAdjust="spacingAndGlyphs", который выполняет
согласование между установленной длиной textLength="700" и расчетной длиной текстовой
фразы, которая может иметь различные длины в зависимости от количества слов и размера
шрифта.   

Другими словами она уплотняет текстовую фразу до заданных размеров textLength="700"
за счет уменьшения ширины отдельных символов 




Анимация текста вдоль сторон многоугольника достигается изменением атрибута  attributeName="startOffset"  

Ниже пример, который работает и в Chrome, FireFox, Opera, IE11 (кроме анимации)
 Начало анимации - клик на кнопке "Старт"