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

#html #css #svg

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





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



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



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







    

Ответы

Ответ 1

#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 кода в его родном окружении,
то есть в файле с расширением *.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


Ответ 2

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

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

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


     


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








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