Включая SVG в HTML5 для iOS - PullRequest
3 голосов
/ 22 марта 2011

Я бы хотел включить изображение SVG в веб-страницу HTML5, взаимодействовать с этим SVG через JavaScript и применять стили CSS.Если возможно, я бы предпочел хранить SVG в отдельном файле.Я надеюсь, что смогу использовать веб-страницу в автономном режиме, поэтому надеюсь, что любое рекомендованное решение будет совместимо с этим.

Пожалуйста, кто-нибудь может предложить лучший / наиболее кросс-браузерный совместимый способ сделать это?Если на самом деле не существует метода, который будет работать во всех браузерах, я был бы рад выбрать способ, который работает с браузером Safari в iOS 4.3: -)

Заранее спасибо!


Спасибо всем и приносим извинения за то, что не давали обновления раньше - К сожалению, я отвлекся на другой проект!После некоторого времени игры с различными альтернативными вариантами (http://tavmjong.free.fr/SVG/SVG_IN_HTML/svg_in_html.html / http://www.schepers.cc/svg/blendups/embedding.html) я все еще не смог использовать внешний файл .svg и сохранить JS в основном файле HTML5 - т.е.Не удалось получить эти подходы, чтобы позволить файлу SVG ссылаться на функции JS или чтобы файл HTML мог получить доступ к элементам из включенного файла SVG.Даже встроенный SVG еще не работает на iOS :( Итак, я собираюсь попытать счастья с Рафаэлем (http://raphaeljs.com). Я думаю, это может означать, что мне нужно будет создавать SVG программно, а не просто ссылатьсяво внешний файл .svg. Мне просто нужно написать скрипт для перевода содержимого SVG в вызовы функций JS Raphael и надеяться избежать любых других камней преткновения.

Ответы [ 2 ]

1 голос
/ 22 марта 2011

Посмотрите на эту страницу: http://www.schepers.cc/svg/blendups/embedding.html

Он показывает пять различных способов встраивания внешнего файла SVG в HTML (обратите внимание, что это не только способы, но они самые простые). Это также быстрый способ проверить возможности конкретного браузера.

1 голос
/ 22 марта 2011

Это зависит от браузеров, на которые вы ориентируетесь. Современные браузеры (IE9, Chrome, Firefox4 ...) поддерживают встроенный SVG. Старые браузеры могут потребовать некоторых альтернатив.

Здесь есть онлайн-тест для проверки поддержки браузера с использованием нескольких методов для включения SVG.

http://tavmjong.free.fr/SVG/SVG_IN_HTML/svg_in_html.html

Но я думаю, что если вы используете HTML5, то вы ориентируетесь на современные браузеры, поэтому вам следует использовать встроенный svg с тегом .

...