изображение в шаблоне в пути в SVG в Mozilla Firefox?

Question

У меня есть начало демонстрационной головоломки в SVG , которая работает в Opera, Chrome и Safari, но не в Firefox: фон rect показывает, но все части полностью отсутствуют.

Части состоят из элемента path, свойство fill которого ссылается на pattern, которое в свою очередь содержит копию переведенного изображения, так что правильная часть изображения попадает под клип пути. Эти части генерируются кодом JavaScript.

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

Мне было бы интересно, если кто-нибудь может сказать мне,

1. Я неправильно прочитал спецификации SVG, и то, что я делаю, вообще не должно работать - Opera, Chrome и Safari были просто добрыми; или

2. В Firefox имеется хорошо известная ошибка, содержащая шаблоны, в которой есть простой обходной путь.

Это моя третья попытка заставить изображение работать в качестве фона для головоломки неправильной формы: фильтры не работают, потому что у них нет способа перевести изображение, на которое они ссылаются, и просто поместить изображение с clipPath не работает, потому что перетаскивание изображения в Safari пытается перетащить файл изображения на рабочий стол, что мешает перетаскиванию частей вокруг головоломки!

Answer 1

О, счастливый день!Я заставил его работать в Firefox с небольшим изменением JavaScript!

Изображение, символ и рисунок были красными сельдями.Проблема заключалась в данных пути.Старая версия выглядела так:

M0,0 h250 v120,q0,20 -20,20,t-20,-20,-20,-20,-20,100,20,100,20,-20,20,-20,20,20,v120 h-250 v-400 z

Новая версия выглядит следующим образом

M0,0 h250 v120 q0,20 -20,20 t-20,-20 -20,-20 -20,100 20,100 20,-20 20,-20 20,20 v120 h-250 v-400 z

Ошибка в коде JavaScript заключалась в использовании запятых для разделения некоторых команд вместо пробелов.Я думаю, что в этом случае Firefox был прав, а другие браузеры слишком милосердны, но чтобы убедиться в этом, потребуется более тщательное перечитывание спецификации, чем я сейчас нахожусь в настроении.: -)

Answer 2

Первое быстрое наблюдение: как вы знаете, SVG - это XML, поэтому вы заканчиваете скрипт-тег неверен Удалить

</script>

тем более что вы уже закрыли этот элемент.