Подтвердить что ты не робот

Отображение векторной графики в браузере

Мне нужно отобразить некоторые интерактивные (прикрепление с помощью DOM-слушателей и т.д. и обработку событий) векторную графику на веб-сайте, над которым я работаю. Существует рекомендация W3C для SVG, хотя этот формат по-прежнему не распознается службой поддержки Internet Explorer, которая является обязательной (для общедоступного веб-сайта). IE обрабатывает VML, хотя и есть даже библиотеки javascript, которые делают какой-то рисунок в виде холста в зависимости от браузера (SVG vs. VML) - excanvas, GFX Dojo Инструментарий и многое другое. Это было бы неплохо и приемлемо, хотя ни один из них не мог отображать изображение SVG из данной разметки.

Итак, вопрос состоит из нескольких частей:

  • Существуют ли библиотеки Javascript с несколькими браузерами, которые отображают векторную графику из данной разметки (не обязательно SVG) и предлагают доступность для присоединения к событиям DOM?
  • Если нет, то какая из самых популярных технологий, встроенных в браузер, была бы наиболее подходящей для выполнения такой задачи? Я могу выбрать из Flex/Flash, Java-апплета. Silverlight не является вариантом из-за блокировки Windows.

[ EDIT] Спасибо всем за ваши комментарии/предложения. Ниже приведены некоторые мои случайные замечания/выводы по этому вопросу:

  • Уровень интерактивности, который мне нужен, - это способность обнаруживать события DOM на отображаемом векторном изображении - мышь, мыши, клик и т.д. - и способность реагировать на них, как изменение цвета фона, отображение диалогового окна и т.д.
  • Идея придерживаться формата SVG неплоха, поскольку она является родной для многих браузеров, кроме самой популярной - IE. После некоторых экспериментов с отображением динамического SVG я понял, что IE версия 7 наиболее проблематична. Там слишком много хлопот из-за несовместимости браузера.
  • Торт кажется отличной картой Javascript, хотя я не мог получить примеры, работающие над IE7.
  • Java-апплеты. Мне понравилась эта идея, поскольку я мог использовать библиотеку Apache Batik, качественный визуализатор SVG. Тем не менее, Batik - очень большая библиотека, и я не могу позволить себе развертывать апплет, который весит несколько мегабайт.
  • Я решил придерживаться опции Flex. Я нашел красивую векторную графическую библиотеку Degrafa. Он использует собственный формат разметки, но распознает нотацию SVG-пути, поэтому в моем случае будет довольно легко преобразовать SVG файлы с помощью XSLT или просто их разбор.

[ EDIT 2] Появились еще несколько комментариев. Я хотел бы уточнить, что под "Windows lock-in" я имею в виду ситуацию, когда Silverlight обычно запускается в Windows, точнее, IE. Я сомневаюсь, что это приемлемое решение (например, Flash или Java-апплет, например) в других системах. Да, я не сомневаюсь, что можно запустить приложение Silverlight в любой системе, хотя я боюсь, что это будет слишком много для среднего пользователя.

@Akira: У вас были проблемы с этими "SVG-рендерингами" на IE7? Я все время бросаю ошибки Javascript.

4b9b3361

Ответ 1

Safari, Opera и Firefox поддерживают SVG изначально (например, без плагинов) до различной степени полноты и правильности, включая возможность script svg из javascript.

Также существует элемент canvas, который теперь стандартизируется в html5 и уже поддерживается в вышеперечисленных браузерах (с различными причудами в некоторых случаях с краем из-за относительно недавних изменений в черновике html5).

К сожалению, любой подход, основанный на стандартах, является своего рода разрушенным IE, преднамеренным игнорированием того, что происходит за пределами его собственной экосистемы, однако существует ряд библиотек, которые пытаются преобразовать canvas/svg в VML (собственный векторный язык IE), например iecanvas.

[Edit: whoops, я забыл свою любимую js-библиотеку - Cake! который может анализировать и отображать svg в холсте, а также поддерживает IE также]

[Еще одно редактирование: Cake на самом деле имеет demo, делая то, что я думаю, что вы хотите сделать]

Ответ 2

Взгляните на библиотеку JavaScript Raphael. Это первые дни, но это выглядит очень многообещающе.

Я помню дорожную карту IE, в которой была поддержка SVG, указанная в IE7.2.

Зависит от того, насколько интерактивен он вам нужен?

Ответ 3

Можете ли вы пояснить, что вы подразумеваете под "Windows lock-in" с Silverlight? Он работает на Windows и MacIntel, а части векторов работают отлично на Linux с плагином Moonlight.

Вы были отброшены отсутствием поддержки Amiga?

Ответ 4

Посмотрите на новый элемент Canvas, который был реализован во многих браузерах. Я слышал также, что есть элемент управления ActiveX для IE, который также реализует элемент Canvas.

Обновление: Подождите, вы уже сказали это. В следующий раз я должен прочитать весь вопрос!:)

Ответ 5

Уолтер Цорн имеет библиотеку JavaScript для произвольной векторной графики. Это выглядит прилично.

Ответ 6

Перейдите на SVG - и просто попросите пользователей подключить ADOBE SVG для IE.

См. этот отличный сайт - который является веб-сайтом правительства Великобритании (государственная служба)

ELGIN

Ответ 7

IE поддерживает VML, но ничего не делает, и это уродливо. Microsoft заявила, что они отказались от нее (с новым XAML и всеми), но все еще остаются частью своего формата Office XML (это как Excel.xlsx поддерживает комментарии, странно).

FX и больше загружают новый элемент Canvas. Многие поддерживают SVG, но, учитывая, что MS работает над Silverlight, я не могу увидеть IE, поддерживающий SVG в ближайшее время.

Предполагается, что Microsoft будет предоставлять подключаемые модули Silverlight без каких-либо операционных систем MS.

Я использую Flex - это довольно хорошо, несмотря на использование Eclipse. Вам не нужно покупать чрезвычайно дорогостоящие компоненты Adobe для использования Flex - он может использовать сервисы SOAP.

Инструменты Dev для Flex довольно доступны, и почти у всех есть Flash.

Ответ 8

Я не думаю, что SVG - хороший выбор для будущего. Из Wikipedia:

  • "Самый распространенный IE-плагин был выпущен Adobe. Adobe, однако, планирует снять этот продукт в начале 2009 года"
  • "... Internet Explorer, который также не поддерживает SVG в предстоящей версии IE8"
  • "... у всех есть неполная поддержка SVG 1.1..."
  • "Плагин Corel SVG Viewer когда-то предлагался из Corel, его разработка прекратилась".

Ответ 9

Из всех возможностей, которые вы перечисляете, единственный, который не является ужасным злоупотреблением существующей технологией (Javascript), едва поддерживается (SVG, элемент Canvas) или большой работой (Java), является Flash. Он был разработан как пакет векторной графики и совместим с большим количеством браузеров, чем SVG и тегом canvas.

Единственная причина, по которой я не выбрал бы Flash по всем другим параметрам, это то, что вы нацеливаетесь на мобильные браузеры или не имеете бюджет для пакета Flash.