Префикс не связан c пространством имён SVG

Question

Хочу сделать текст дугой.
Как видно в данном примере тут все отображается, а вот если в браузере открыть, то получаю вот такую ошибку и в Opera Chrome, FF

А вот в EDGE && IE просто пустота без всяких ошибок. Не смотря на ошибку, я вопрос в любом случае хотел написать, так как хотел спросить помощи в разъяснении логики построение координат атрибута d элемента path, но тут получается два вопроса в одном...

Коллеги, вопрос, что эта за ошибка у меня и как ее исправить, с утра не могу справиться с ней?

И может кто разъяснить хотя бы приблизительно какая координата атрибута d элемента path за что отвечает?

<svg width="300" height="200" viewBox="0 0 200 200">
<style>
svg{
border:2px solid red;
}
</style>
    <defs>
        <path id="textpath" fill="none" stroke="none" d="M0.057,0.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992" />
    </defs>
    <use xlink:href="textpath" />
    <text x="10" y="10" fill="green">
        <textPath xlink:href="#textpath">
            Lorem ipsum dolor sit amet consectetur.
        </textPath>
    </text>
</svg>

Alexandr_TT · Accepted Answer · 2018-02-08T13:36:41.307

#1.

Немного уточню вопрос.
Сообщение об ошибке появляется при открытии файла с расширением *.svg
Если точно такой же код SVG сохранить с расширением *.html то сообщения об ошибке не будет.

В современных браузерах html парсер, если есть ошибки в svg коде пропускает их и выполняет код дальше. В вашем коде не указано пространство имен XML. Парсер svg считает это ошибкой и останавливает выполнение файла.

Необходимо добавить в шапку svg файла строчки определяющие namespace xml:

xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

и тогда ваш код будет работать в любом окружении.

<svg width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="200" viewBox="0 0 200 200">
<style>
svg{
border:2px solid red;
}
</style>
    <defs>
        <path id="textpath" fill="none" stroke="none" d="M0.057,0.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992" />
    </defs>
    <use xlink:href="textpath" />
    <text x="10" y="10" fill="green">
        <textPath xlink:href="#textpath">
            Lorem ipsum dolor sit amet consectetur.
        </textPath>
    </text>
</svg>

Отсюда вытекает практический совет,- делать отладку svg кода в его родном окружении, то есть в файле с расширением *.svg и только потом добавлять код в html страничку.

#2.

И может кто разъяснить хотя бы приблизительно какая координата атрибута d элемента path за что отвечает?

 d="M0.057,0.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992" />

M (moveto) - переместить перо в точку с координатами (X,Y) 0.057,0.024
c с этого символа начинается формула кубической кривой Безье – The cubic Bezier curve

score 3 · Answer 2 · answered Feb 08 '18 at 16:11

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

Этот вид анимации текста пока не выполняется с помощью правил анимаций CSS

Для реализации анимации текста вдоль кривой направляющей достаточно к примеру автора вопроса добавить одну строку:

<animate  dur="8s" repeatCount="indefinite" attributeName="startOffset" values="1%;100%;1%"/>

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

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="100 100 400 400">
<style>
svg{
border:1px solid grey;
}
</style>
    <defs>
        <path id="textpath" fill="none" stroke="grey" d="M100,200 C100,100 250,100 250,200 S 400,300 400,200" />
    </defs>
    <use xlink:href="textpath" />
    <text x="10" y="10" fill="green" font-size="24px" font-family="sans-serif">
        <textPath xlink:href="#textpath">
            Lorem ipsum dolor sit amet consectetur. 
   <animate  dur="8s" repeatCount="indefinite" attributeName="startOffset" values="1%;100%;1%"/>
        </textPath>
    </text>
</svg>

2. Более сложный пример анимации текста, вокруг многоугольника:

<svg  xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="450" 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="start.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="start.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"/> 
</svg>

Префикс не связан c пространством имён SVG

2 Answers2

#1.

#2.

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

Linked