SVG не отображается в IE 10 с Doctype HTML 4

<%@ Page Language="C#" .. %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg> 
 </body>
</html>

/ * Приведенный выше код не работает. Нет вывода. если заменить вторую строку Doctype, как показано ниже, он работает.

‹! DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Может ли кто-нибудь помочь мне понять, в чем ключевая разница? * /


svg doctype xhtml internet-explorer-10 html4
person Apparao    schedule 08.02.2013    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Ключевое отличие состоит в том, что

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

заставляет браузер использовать режим причуд. IE не поддерживает SVG в режиме причуд.

в то время как

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

переводит браузер в почти стандартный режим.

Вы можете легко превратить свой doctype в такой, который будет отображать SVG в IE9, просто добавив системный идентификатор, например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Я не знаю, будет ли это работать с IE10, но если IE10 следует правилам синтаксического анализа документа HTML5, как должен, даже указанный выше тип документа вызовет режим quirks и, следовательно, может привести к тому, что SVG не будет отображаться.

HTML 4.0 был заменен в качестве рекомендации W3C на HTML 4.01 более тринадцати лет назад в 1999 году, поэтому абсолютный минимальный тип документа, который вы должны использовать, это

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

что вызовет режим почти стандартный в браузерах, совместимых с HTML5, точно так же, как упомянутый вами тип документа XHTML. Но это было предназначено для людей, переходящих с HTML 3.2 на свои сайты.

Намного лучше было бы убедиться, что ваш сайт работает в стандартном режиме. Вы можете сделать это, используя строгий тип документа HTML 4.01, например

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Это текущая рекомендация W3C, но запомнить ее еще долго. Самая короткая строка, которая выполняет ту же работу по переводу браузеров в режим стандартов:

<!DOCTYPE HTML>

именно поэтому он был выбран для использования в HTML5 и более поздних документах.

person Alohci    schedule 08.02.2013

arrow_upward
2
arrow_downward

Стандартный тип документа html 5:

<!DOCTYPE html>

Вы должны использовать это.

IE 9/10 отображает SVG только для html 5 документов и xhtml документы. Ваш альтернативный тип документа помечает содержимое как xhtml, поэтому это работает.

person Robert Longson    schedule 08.02.2013
comment
Спасибо за ответ. Есть ли обходной путь или решение, чтобы заставить его работать с HTML 4 Doctype. Мне нужен Doctype только в формате HTML 4. - person Apparao; 08.02.2013
comment
Нет. IE9 отображает SVG только в стандартном режиме, и вам понадобится doctype html5, чтобы получить его в стандартном режиме. Я добавил ссылку на ответ, который является заявлением Microsoft по этому поводу. - person Robert Longson; 08.02.2013
comment
@Apparao Зачем вам нужен HTML4 DOCTYPE? - person robertc; 08.02.2013

arrow_upward
1
arrow_downward

Две вещи:

  1. Убедитесь, что ваш веб-сервер обслуживает ваши файлы SVG с правильным mime-типом: «image / svg + xml». У меня была эта проблема со старой версией Lighttpd.

  2. Вы можете переопределить режим рендеринга IE, добавив метатег X-UA-Compatible:

    ‹Meta http-Equiv =" X-UA-Compatible "content =" IE = edge "/>

Это приведет к переходу IE в стандартный режим с сохранением старого типа документа. Это НЕ было бы лучшей практикой, но, похоже, работает в IE10.

person RedMatt    schedule 22.04.2013