Firefox не выбирает SVG-фильтр для уменьшения изображения

Question

Я использовал следующий SO-ответ ...

https://stackoverflow.com/a/8612047/80969

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

http://www.jungledragon.com/video/2

Обратите внимание, что помимо видео есть несколько больших пальцев, но виден только один, другой появляется только после наведения на него. Конечно, он должен быть всегда видимым, но ненасыщенным, когда не активен.

В поисках разницы между моей разработкой и производственными настройками я прочитал, что запрос файла SVG (для фильтра) должен происходить из того же домена, что и страница, запрашивающая его.

В производственном процессе мой общий домен www.jungledragon.com

Файл CSS, содержащий ссылку на фильтр, размещен на отдельном поддомене: static.jungledragon.com. Из этого файла CSS делается ссылка на filters.svg, который находится в том же каталоге на static.jungledragon.com.

Я думаю, что поскольку CSS-файл и файл SVG находятся в одном домене и каталоге, проблем не должно быть. Тогда я подумал, что, возможно, запрашивающая страница (не CSS, а файл HTML) должна находиться в том же домене, что и файл SVG. Поэтому я изменил ссылку в файле CSS на жестко закодированный www.jungledragon.com. Это тоже не помогает.

Есть идеи, почему Firefox не получает ссылку SVG должным образом?

Answer 1

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

Добавьте файл .htaccess со следующим содержимым:

RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml
RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0
RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{THE_REQUEST} HTTP/1\.1
RewriteRule .* - [T=application/xhtml+xml]

Кроме того, отсутствует ссылка на файл SVG http://

section.videopanel .videos li img {
    -moz-transition: all 0.5s ease 0s;
    filter: url("http://www.jungledragon.com/css/filters.svg#grayscale");
}