Подтвердить что ты не робот

SVG, поскольку URI данных запускает ошибку синтаксического анализа XML в Firefox

Я сделал демо-версию codepen, иллюстрирующую проблему: codepen.io/acusti/pen/mJmVRy

И появляется ошибка, которую я получаю, если попытаюсь загрузить содержимое svg в Firefox:

Ошибка анализа XML: незаблокированный токен
Местонахождение: data:image/svg+xml;utf8,<svg%20viewBox='0%200%20120%20120'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><circle%20cx='45'%20cy='45'%20r='30'%20fill='#555555'></circle></svg>
Номер строки 1, столбец 77:

<svg viewBox='0 0 120 120' version='1.1' xmlns='http://www.w3.org/2000/svg'><circle cx='45' cy='45' r='30' fill='
----------------------------------------------------------------------------^

Примечание. Я получаю эту ошибку, нажимая на строку URI данных в инструментах разработчика Firefox (внутри панели правил CSS при проверке элемента .separator), где всплывающая подсказка говорит "Не удалось загрузить изображение". Вы можете сделать то же самое, просто скопировав строку Location из сообщения об ошибке выше в адресную строку Firefox.

4b9b3361

Ответ 1

Неправильно для URI данных содержать # символов, как у вас, вы должны избежать их как% 23

Неэкранированный символ # зарезервирован для указания начала идентификатора фрагмента. Firefox совершенно прав, чтобы указать ошибку синтаксического анализа.