Чтобы разместить текст целиком вокруг фигуры необходимо узнать длину пути, то есть длину периметра сторон многоугольника.
Для нашего примера длина периметра многоугольника будет равна 760px
Чтобы конец текстовой фразы не перекрывал символы начала и был гарантированный промежуток между ними,- установим textLength="700"
Теперь для текста применим атрибут lengthAdjust="spacingAndGlyphs"
, который выполняет согласование между установленной длиной textLength="700"
и расчетной длиной текстовой фразы, которая может иметь различные длины в зависимости от количества слов и размера шрифта.
Другими словами она уплотняет текстовую фразу до заданных размеров textLength="700"
за счет уменьшения ширины отдельных символов
<text id="txt1" lengthAdjust="spacingAndGlyphs" textLength="700" font-size="20">
Анимация текста вдоль сторон многоугольника достигается изменением атрибута attributeName="startOffset"
Ниже пример, который работает и в Chrome, FireFox, Opera, IE11 (кроме анимации)
Начало анимации - клик на кнопке "Старт"
<html >
<head>
<meta charset="UTF-8">
</head>
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 400 450">
<defs>
<linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox">
<stop stop-color="#406666" offset="0%"/>
<stop stop-color="#fcfcfc" offset="50%"/>
<stop stop-color="#507676" offset="100%"/>
<animate attributeName="x2" begin="svg1.click" dur="10s" values="0;0.25;0.5;0.75;1" repeatCount="1"/>
</linearGradient>
<path id="path1" d="M92 262.5L92,137.5 200,75 308,137.5 308,262.5
200,325 92,262.5 92,137.5 200,75 308,137.5 308,262.5 200,325 92,262.5" fill="none" stroke="none"/>
</defs>
<rect x='0' y='0' width='400' height='450' fill='#DDDDDD' stroke='black'/>
<rect x="1" y="1" width="398" height="378"
fill="white" stroke="#507676" stroke-width="1" />
<polygon id="pol1" fill="url(#grad1)" stroke="#507676" stroke-width="1"
points="200,75 308,137.5 308,262.5
200,325 92,262.5 92,137.5" />
<text id="txt1" lengthAdjust="spacingAndGlyphs" textLength="700" font-size="24">
<textPath id="result" method="align" spacing="auto" startOffset="1%" xlink:href="#path1">
<tspan dy="-10"> Весь очень длинный текст целиком вокруг шестиугольника</tspan>
<animate begin="svg1.click" dur="10s" repeatCount="1" attributeName="startOffset" values="4%;54%"/>
</textPath>
</text>
<g id="start">
<rect x="285" y="387" rx="10" width="90" height="35" style="fill:#507676;"/>
<text x='300' y='412' fill="white" font-size="25">Старт</text>
</g>
<path id="path2" transform="scale(1.25) translate(-40 -40)" d="M92 262.5L92,137.5 200,75 308,137.5 308,262.5
200,325 92,262.5 92,137.5 200,75 308,137.5 308,262.5 200,325 92,262.5" fill="none" stroke="#507676" stroke-width="1" stroke-opacity="1"/>
<text x="150" y="200" font-size="24px" fill="green">Click me </text>
</svg>
</html>