web-dev-qa-db-fra.com

L'URL XMLNS W3 pour la spécification SVG génère maintenant une erreur dans Chrome

J'ai utilisé ce masque SVG pour les niveaux de gris dans les navigateurs où filter: grayscale(100%) ne fonctionne pas:

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");

Il y a quelque temps, cela fonctionnait parfaitement, mais maintenant, je reçois cette erreur dans la console:

Tentative dangereuse de chargement de données URL: image/svg + xml; utf8, http: //www.w3.org/2000/svg 'height =' 0 '> # niveaux de gris du cadre avec l'URL [ mon domaine ici ]. Les domaines, protocoles et ports doivent correspondre.

Inutile de dire que le filtre en niveaux de gris ne fonctionne plus.

  1. Pouvez-vous expliquer ce qui ne va pas?
  2. Peut-on résoudre ce problème pour que le même code CSS soit utilisé, qu'aucune erreur ne soit générée et que le filtre fonctionne? 
  3. Considérant qu'il mentionne le même domaine et le même protocole, bien que je ne sache pas comment mettre en œuvre la solution car je ne comprends pas le problème, je peux mettre et lier des fichiers sur le même domaine/sous-domaine avec le même protocole, au lieu d'utiliser des outils externes. URL.

METTRE À JOUR:

L'utilisateur @Potherca a commenté: 

... travaillé dans Chrome 52, cassé dans Chrome 53 ...

C'est aussi mon expérience. Le masque SVG ne fonctionne pas dans la version actuelle de Chrome (version 53.0.2785.116 de Chrome), mais dans la version précédente. Cela fonctionne toujours dans Firefox et Safari.

UPDATE 2: Je l'ai essayé avec https comme ...xmlns='http://www.w3.org/2000/svg'... mais l'erreur/le bogue persiste.

UPDATE 3: Comme l'a suggéré @Potherca, déplacer la ligne de filtre SVG en haut de la liste des règles de filtrage inter-navigateurs élimine le bogue. REMARQUE: il s'agit d'une solution de contournement, mais le bogue principal existe toujours dans Chrome/Safari/webkit, mais pas dans les autres navigateurs/kits au moment de cette mise à jour.

cssxmlsvgcross-domain
16
Andre Bulatov

J'ai eu des problèmes similaires. Pour la prise en charge inter-navigateurs, plusieurs lignes filter ont été ajoutées dans le CSS.

Cela semble être dû au fait que le filtre SVG est le dernier en ligne. En le déplaçant avant d'autres lignes de filtrage, Chrome utilisait une autre variable filter et l'erreur disparaissait.

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

Ce problème se produisait pour moi sur la version de Chrome 59.0.3071.115 (version officielle) (64 bits).

Cela fonctionne après que j'ai fait le changement basé sur la réponse précédente

@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;
            }
        }

Le code modifié est

@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;
        }
    }
1
Sagar Kharate

Cela pourrait aider quelqu'un qui n'utilise pas de filtre SVG mais reçoit toujours un message d'erreur similaire.

Tentative dangereuse de chargement de données URL: image/svg + xml; utf8 ...

J'imagine qu'au moins Chrome et Firefox utilisent des filtres SVG sous le capot, même si vous avez simplement défini la règle CSS filter.

Donc, dans mon cas, le problème était une filter dans le sélecteur d'imbrication CSS mal formaté, ce qui est arrivé parce que je passais d'une imbrication de style SASS à une imbrication de style CSS. La spécification nécessite de démarrer chaque sélecteur imbriqué avec &.

0
andrei3k