xmlns W3 URL dla SVG Spec teraz rzuca błąd w Chrome

Question

użyłem tego SVG maskę do skali szarości w przeglądarkach gdzie filter: grayscale(100%) nie działa:

filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");

Jakiś czas wstecz, to działało perfekcyjnie, ale teraz mam ten błąd w konsoli:

niebezpieczne próba załadowania danych URL: image/svg + xml; utf8, http: //www.w3.org/2000/svg 'height =' 0 '> # greyscale from fr ame z adresem URL [moja domena tutaj]. Domeny, protokoły i porty muszą się zgadzać.

Nie trzeba dodawać, że filtr skali szarości nie działa.

1. Czy możesz wyjaśnić, co się dzieje?
2. Czy można to naprawić, aby używany był ten sam kod CSS, nie jest zgłaszany błąd, a filtr działa?
3. Biorąc pod uwagę, że wspomina o tej samej domenie i protokole, chociaż nie wiem, jak wdrożyć rozwiązanie, ponieważ nie rozumiem problemu, jestem w stanie umieszczać i łączyć pliki w tej samej domenie/poddomenie z tym samym protokołem, zamiast tego korzystania z zewnętrznego adresu URL.

UPDATE:

użytkownika @Potherca komentuje:

... pracował w Chrome 52, złamał w Chrome 53 ...

To także mój doświadczenie. Maska SVG nie działa w bieżącej wersji Chrome (wersja Chrome 53.0.2785.116), ale działała w poprzedniej wersji. Nadal działa w Firefoksie i Safari.

UPDATE 2: Próbowałem go https jak ...xmlns='http://www.w3.org/2000/svg'... ale błędu/błąd będzie się powtarzał.

UPDATE 3: Jak sugeruje użytkownik @Potherca, przesuwając linię filtrów SVG na szczycie listy reguł filtrujących różnych przeglądarkach eliminuje błąd. UWAGA: jest to obejście problemu, ale główny błąd nadal występuje w przeglądarce Chrome/Safari/Webkit, ale nie w innych przeglądarkach/zestawach w czasie tej aktualizacji.

Answer 1

Miałem podobne problemy. W przypadku obsługi wielu przeglądarek w CSS dodano kilka linii filter.

Wygląda na to, że filtr SVG jest ostatnim w kolejności. Przesuwając go w górę przed innymi liniami filtra, Chrome użył innego filter i błąd zniknął.

.gray-out { 
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); 
    filter: gray; 
    filter: url("data:image/svg+xml;utf8,<svg>...</svg>");/* Move this line up */ 
} 

Answer 2

Ten problem wystąpił dla mnie w wersji Chrome 59.0.3071.115 (Dziennik budowy) (64-bit)

Pracuje po Zrobiłem zmiany na podstawie poprzedniej odpowiedzi

@media only screen and (min-width: 820px) { 
      .brand-slider img { 
       filter: grayscale(100%); 
       -webkit-filter: grayscale(100%); 
       -moz-filter: grayscale(100%); 
       -ms-filter: grayscale(100%); 
       -o-filter: grayscale(100%); 

       filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ 

      transition: all 1000ms ease 0s; 
      } 
     } 

kod zmieniany

@media only screen and (min-width: 820px) { 
     .brand-slider img { 

      filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ 

      filter: grayscale(100%); 
      -webkit-filter: grayscale(100%); 
      -moz-filter: grayscale(100%); 
      -ms-filter: grayscale(100%); 
      -o-filter: grayscale(100%); 
     transition: all 1000ms ease 0s; 
     } 
    } 

Answer 3

To może pomóc komuś, kto nie używa filtr SVG, ale wciąż otrzymuje podobny komunikat o błędzie.

niebezpieczne próba załadowania danych URL: image/svg + xml; utf8 ...

Zgaduję, że najmniej Chrome i Firefox są za pomocą filtrów SVG pod maską nawet jeśli zdefiniowano tylko reguła CSS filter.

W moim przypadku problemem był filter pod nieprawidłowo sformatowanym selektorem zagnieżdżania CSS, który zdarzył się, ponieważ przełączałem się z zagnieżdżania stylów SASS do zagnieżdżania stylów CSS. Specyfikacja wymaga uruchomienia każdego selektora zagnieżdżonego za pomocą &.