SVG не использует сафари - PullRequest
4 голосов
/ 20 июня 2011

Кажется, у Safari есть некоторые проблемы с рендерингом моего SVG, в то время как другие браузеры делают это правильно.Любая идея о том, что не так?

Вот URL:

http://bcndevcon.org/dev/infographic/

Я видел много примеров использования iFrame, я не знаю, еслиэто как-то связано с проблемой.

Обновление: похоже сервер отправляет неверный тип контента, Content-Type: text / html

enter image description here

Обновление 2: чтобы правильно отрисовать его во всех браузерах, используйте xhtml вместо html-расширения, например: index.html

Ошибка новичка:)

Ответы [ 2 ]

6 голосов
/ 20 июня 2011

У вас есть страница XHTML, которая обслуживается как text/html. Измените свой сервер, чтобы он обслуживал вашу страницу как application/xhtml+xml, или включите в качестве первого элемента в <head> следующее:

<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />

Если Safari интерпретирует вашу страницу XHTML как HTML, он не будет интерпретировать элементы SVG как что-либо кроме пользовательской разметки.

Для справки, вот пример SVG в XHTML , который работает в Safari, включая использование JavaScript для создания элементов SVG.

Редактировать : Кроме того, у вас сломан XHTML; в вашем теге <link> отсутствует самозакрывающийся маркер; см. результаты проверки .

Реальная проблема, однако, в том, что у вас есть неверный URI для вашего элемента <script> при ссылке на jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

Добавьте правильный http: в начало этого URI, и вы увидите, что ваша страница работает (если вы исправите две другие проблемы).

2 голосов
/ 20 июня 2011

Это зависит от innerHTML (через функцию jQuery html ) для правильного анализа html5, что, вероятно, не относится к используемой вами версии Safari .

Если бы вместо этого вы использовали DOM Core для создания элементов, было бы прекрасно или альтернативно использовать DOM Parser API для анализа фрагментов SVG.См. этот пример .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...