Отображение <svg>в браузере iOS с использованием <html>без использования тега <embed> - PullRequest
2 голосов
/ 28 сентября 2011

Можно ли отображать <svg> контент внутри <html> в браузере iOS без использования тегов <embed> или <img> , которые требуют от меня хранения контента <svg> в отдельном файле?

Встраивание контента <svg> в <html>, похоже, работает во всех других современных браузерах (IE9, Chrome, даже Safari на Windows!).

Я обнаружил, что некоторые ссылки, предлагающие изменить тип содержимого на 'text/xml', могут работать, но я не могу изменить его, так как мой код выполняется как часть элемента управления мобильного сервера в SharePoint 2010.

Моя страница содержит несколько <svg> областей, каждая из которых отображает простой график. Данные для этих графиков хранятся в сериализованном объекте, который необходимо десериализовать перед тем, как можно нарисовать полилинии svg. Поскольку процесс десериализации занимает много времени, я предпочитаю делать это один раз и генерировать все графики за один проход, а не генерировать ссылки на ресурсы для отдельных файлов SVG, на которые может ссылаться тег <embed>.

Редактировать: Есть признаки , что встроенный <svg> поддерживается в iOS5.

Ответы [ 3 ]

4 голосов
/ 28 сентября 2011

Если вам нужно встроить SVG непосредственно в документ

Используйте XHTML (не только HTML), предоставьте ему правильный тип MIME, и ваш SVG будет работать правильно во всех основных браузерах, в том числе вiPhone и iPad.

Этот файл примера использует встроенный SVG в XHTML и даже использует JavaScript и CSS в основном документе для управления SVG:
http://phrogz.net/SVG/svg_in_xhtml5.xhtml

Он отлично работает вiPhone / iPad.

Если вам нужно сослаться на внешний файл

Используйте тег <img> для прямой ссылки на SVG.Это работает на iOS.

Например, откройте это на вашем iPhone / iPad:
http://phrogz.net/SVG/svg-via-img.html
, который ссылается на
http://phrogz.net/SVG/heart.svg

Обратите внимание, что есть ошибка с WebKit , связанная с отображением SVG с переменным размером внутри тегов фиксированного размера <img>.(Похоже, что соотношение сторон для SVG рисуется из соотношения сторон содержащегося окна вместо размеров элемента <img>.) Вы можете увидеть странности в Chrome или Safari, если измените размер окна браузера с помощью этого тестового файла.,

3 голосов
/ 28 сентября 2011

Вам может понадобиться использовать встроенный SVG внутри составного документа XHTML.В этом случае пространства имен XML используются как для корневого элемента HTML, так и для встроенного элемента SVG.См. Здесь соответствующий пример:
http://www.croczilla.com/bits_and_pieces/svg/samples/dom1/dom1.xml

Другие полезные примеры можно найти здесь:
http://www.croczilla.com/bits_and_pieces/svg/samples

0 голосов
/ 28 сентября 2011

Вы пробовали использовать <object>? Я давно этого не делал, но вы можете за это погуглить.

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