/ / Firefox nie odbiera filtru SVG, aby zmniejszyć nasycenie obrazu kciukami - css, svg

Firefox nie pobiera filtru SVG, aby nadać obraz kciukom - css, svg

Użyłem następującej odpowiedzi SO ...

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

..aby zaimplementować desaturowane kciuki, gdzie po najechaniu nimi filtr jest usuwany, a kciuk pokazuje kolor. Dostałem to do pracy w moim środowisku programistycznym. Teraz, gdy mam tę funkcję w produkcji, nie działa ona w Firefoksie (10):

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

Zauważ, że istnieje wiele kciuków opróczwideo, ale tylko jedna jest widoczna, a druga pojawia się dopiero po najechaniu nią. Oczywiście powinna być widoczna przez cały czas, a jeszcze niewystarczająca, gdy nie jest aktywna.

W moich poszukiwaniach znalezienia różnicy między moim deweloperem a ustawieniami produkcyjnymi, czytałem, że żądanie pliku SVG (dla filtra) musi nastąpić z tej samej domeny co strona żądająca tego.

W produkcji moja domena główna to www.jungledragon.com

Plik CSS zawierający odniesienie do plikufiltr jest hostowany w oddzielnej poddomenie: static.jungledragon.com. Z tego pliku CSS odwołuje się do filters.svg, który znajduje się w tym samym katalogu pod adresem static.jungledragon.com.

Myślę, że od tego czasu zarówno CSS, jak i SVGplik znajduje się w tej samej domenie i katalogu, nie powinno być problemu. Następnie rozważałem być może strona żądająca (nie CSS, ale plik HTML) powinna znajdować się w tej samej domenie co plik SVG. Dlatego dostosowałem odnośnik w pliku CSS do zakodowanego na www.jungledragon.com. To też nie pomaga.

Jakieś pomysły, dlaczego Firefox nie zbiera poprawnie referencji SVG?

Odpowiedzi:

2 dla odpowiedzi № 1

Zgodnie z ta odpowiedź, Filtry svg działają tylko na dokumentach xhtml, więc domyślam się, że to twój lokalny serwer internetowy, ale twój publiczny nie jest.

Dodaj plik .htaccess z następującą treścią:

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

Ponadto brakuje pliku referencyjnego pliku SVG http://

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