IE11 meta element Breaks SVG

Mam osadzone dane SVG bezpośrednio do mojego html. Wyświetla się w przeglądarce Chrome i Firefox, ale w IE11 nie wyświetla się wcale. Link do pastebin do SVG to http://pastebin.com/eZpLXFfD IE11 meta element Breaks SVG

Próbowałem dodać META TAG, ale bezskutecznie. Na początku myślałem, że może to być problem z kompatybilnością IE, ale przełączanie tej funkcji również nie działa.

<meta http-equiv="X-UA-Compatible" content="IE=8">

Każda pomoc? Co jeszcze mogę podać informacje, aby pomóc w udzieleniu odpowiedzi na to pytanie?

Źródło

2014-12-15 Rahil Pirani

* Jak * wyświetlasz to w dokumencie HTML? – Sampson

Mam kod SVG zapisany w pliku php, a następnie używając '' Aby wywołać plik php. Nie jest jednak zawarty w żadnym elemencie. Rzeczywisty plik php SVG jest pokazany w pastebin. –

Jedynym sposobem, który mi odpowiada, jest ustawienie szerokości i wysokości obrazu svg. –

Brzmi to tak, jakby nie był w nowoczesnym trybie dokumentu. Internet Explorer 11 pokazuje, że SVG jest w porządku, gdy jesteś w trybie standardowym. Upewnij się, że jeśli masz metatag x-ua-compatible, ustaw go na Edge, a nie na wcześniejszy.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Można określić tryb dokumentu, otwierając swoje Narzędzia F12 deweloper i sprawdzanie albo rozwijana Tryb dokument (obserwowane w prawym górnym rogu, obecnie „Krawędź”) lub na karcie emulacji:

enter image description here

Jeśli nie masz metatagu x-ua-compatible (lub nagłówka), pamiętaj, aby użyć typu dokumentu, który spowoduje, że dokument będzie w trybie standardowym, na przykład <!DOCTYPE html>.

enter image description here

Źródło

2014-12-15 22:51:41 Sampson

To się stało, Jonathan! Jeszcze raz dziękuję! –

Masz zduplikowane atrybuty stylu dla każdego elementu.

style="opacity:0.8"

To z pewnością nie wyświetla się w Firefoksie dla mnie z powodu tego błędu. Jeśli wyświetla się w Chrome, najlepiej podnieść błąd przeglądarki Chrome.

Źródło

2014-12-15 22:29:51

Dzięki za szybką odpowiedź Robert ... Właśnie usunąłem duplikaty tagów stylu i nadal nie idę ...:/ –

Właśnie sprawdziłem w firefoxie, to powinno działać teraz –

Wymyśliłem! Strona została w trybie renderowania IE8 ... miał

<meta http-equiv="X-UA-Compatible" content="IE=8">

w nagłówku ... zmienił go do

<meta http-equiv="X-UA-Compatible" content="IE=9">

9 i to działa!

Źródło

2014-12-15 22:50:15

Czy masz powód, by ograniczać się do IE 9 tryb dokumentu? – Sampson

I był ten sam problem u 3 z 4 pomostów żylnych inline ja z wykorzystaniem, i tylko zniknął (w jednym przypadku częściowo) na IE11.

Na stronie miałem <meta http-equiv="x-ua-compatible" content="ie=edge">.

W końcu problemem były dodatkowe ścieżki obcinania w pliku SVG. Otworzyłem pliki w Illustratorze, usunąłem ścieżkę przycinającą (zwykle na dole warstw) i teraz wszystkie one działają.

Źródło

2016-03-11 18:15:50 rafaelbiten

czy możesz podać przykład takiej ścieżki? W tej chwili zmagasz się z podobnym problemem. – montrealist

Witam @montrealist! Niestety nie mam programu Illustrator, który pomógłby ci w odtworzeniu problemu. Jeśli masz ilustratora, powinno być łatwo sprawdzić, czy svg ma "ścieżkę obcinania". Załóżmy, że masz ikonę svg, otwórz ją w programie Illustrator, naciśnij "a", aby użyć "narzędzia bezpośredniego wyboru" i spróbuj wybrać jeden z rogów "obszaru roboczego". Jeśli możesz go wybrać i nie jest częścią svg/ikony, prawdopodobnie jest to ścieżka przycinająca. Spróbuj kilka razy nacisnąć przycisk usuwania, aby go usunąć. Naprawdę nie pamiętam, jak ścieżki przycinające były wyświetlane w kodzie svg, ale mam nadzieję, że to pomoże! Czy jesteś z montrealskiego miasta? – rafaelbiten

Tak, proszę pana, siedząc tutaj w biurze na płaskowyżu. :) Nie mam programu Illustrator, po prostu bezpośrednio odtwarzam kod. Mam nadzieję, że nie będę musiał ściągać całego tego błędu ... – montrealist

IE11 meta element Breaks SVG

Odpowiedz

Powiązane problemy