Я работаю над интерактивным интерфейсом с использованием SVG и JavaScript/jQuery, и я пытаюсь решить между Raphael и jQuery SVG. Я хотел бы знать
Мне не нужна поддержка VML/IE в Raphael или возможности построения jQuery SVG. Меня интересует самый элегантный способ создания, анимации и управления отдельными элементами на холсте SVG.
Недавно я использовал Raphael и jQuery SVG - и вот мои мысли:
Плюсы: хорошая стартовая библиотека, легко сделать много вещей с SVG быстро. Хорошо написано и задокументировано. Множество примеров и демонстраций. Очень расширяемая архитектура. Отличная анимация.
Минусы: - это слой поверх фактической разметки SVG, затрудняет выполнение более сложных вещей с помощью SVG - например, группирование (оно поддерживает Sets, но не группы). Не работает с редактированием уже существующих элементов.
Плюсы: плагин jquery, если вы уже используете jQuery. Хорошо написано и задокументировано. Множество примеров и демонстраций. Поддерживает большинство элементов SVG, позволяет легко получить доступ к элементам.
Против: архитектура не такая расширяемая, как Raphael. Некоторые вещи могут быть лучше документированы (например, настройка элемента SVG). Не работает с редактированием уже существующих элементов. Опираясь на семантику SVG для анимации - это не так уж хорошо.
SnapSVG является преемником Рафаэля. Он поддерживается только в браузерах с поддержкой SVG и поддерживает почти все функции SVG.
Если вы делаете что-то быстро и просто, Raphael - это простой выбор. Если вы собираетесь сделать что-то более сложное, я решил использовать jQuery SVG, потому что я могу манипулировать фактической разметкой значительно проще, чем с Raphael. И если вы хотите не-jQuery-решение, то SnapSVG - хороший вариант.
Для потомков я хотел бы отметить, что я решил выбрать Рафаэля из-за чистого API и бесплатной поддержки IE, а также потому, что активная разработка выглядит многообещающей (поддержка событий была добавлена, например, в 0,7). Тем не менее, я оставлю вопрос без ответа, и мне все равно будет интересно узнать о опыте других, используя библиотеки Javascript + SVG.
Я большой поклонник Рафаэля, и импульс развития, похоже, идет сильный (версия 0.85 была выпущена в конце прошлой недели). Еще один большой плюс заключается в том, что его разработчик, Дмитрий Барановский, в настоящее время работает над плагином для карт Рафаэля, g.raphael, который выглядит так, чтобы его формирование было довольно гладким (есть несколько примеров результатов с ранних версий на Flickr).
Однако, чтобы просто добавить другого возможного соперника в смешанную библиотеку SVG, Google SVG Web выглядит очень (хотя я не большой поклонник Flash, который он использует для рендеринга в браузерах, не совместимых с SVG). Вероятно, нужно смотреть, особенно с предстоящим SVG Open conference.
Рафаэлю определенно проще настроить и начать работу, но обратите внимание, что есть способы выразить вещи в SVG, которые невозможно в Рафаэле. Как отмечено выше, нет "групп". Это означает, что вы не можете реализовать уровни преобразований координат. Вместо этого доступно только одно преобразование координат.
Если ваш дизайн зависит от вложенных преобразований координат, Рафаэль не для вас.
О, Рафаэль значительно изменился с июня. Существует новая графическая библиотека, которая может работать с ней, и это очень привлекательно. Raphael также поддерживает полный синтаксис пути SVG и включает в себя действительно продвинутые методы пути. Приходите посмотреть 1.2.8+ на моем сайте (Бесстыдный плагин), а затем отскочить на сайт Дмитрия. http://www.irunmywebsite.com/raphael/raphaelsource.html
Я думаю, что это не совсем не связано, но вы считаете, что это холст? что-то вроде Процесс JS может упростить.
Вы также должны посмотреть на svgweb. Он использует flash для рендеринга svg в IE и, возможно, в других браузерах (в тех случаях, когда он поддерживает больше, чем сам браузер).
Я отдаю свой голос за Рафаэля - кросс-браузерная поддержка, чистый API и последовательные обновления (до сих пор) делают его приятным для использования. Он очень хорошо играет с jQuery. Обработка - это круто, но более полезно в качестве демонстрации для переливающихся вещей.
Как начинающий Javascript, я нашел образцы Rapahel не очень легкими, я рекомендую http://cancerbero.mbarreneche.com/raphaeltut, что является настоящим пошаговым руководством.
Для тех, кто не заботится о IE6/IE7, тот же парень, который написал Raphael, построил движок svg специально для современных браузеров: Snap.svg.. у них действительно хороший сайт с хорошим docs: http://snapsvg.io
snap.svg не может быть проще использовать прямо из коробки и может манипулировать/обновлять существующие SVG или создавать новые. Вы можете прочитать этот материал на странице snap.io, но здесь быстрый прогон:
против
Pros
Реализует полные функции SVG, такие как маскировка, обрезка, шаблоны, полные градиенты, группы и т.д.
Возможность работать с существующими SVG: не нужно создавать контент с помощью Snap для работы с Snap, позволяя вам создавать контент с помощью каких-либо общих инструментов проектирования.
Полная поддержка анимации с использованием простого, простого в использовании JavaScript API
Работает со строками SVG (например, файлы SVG, загружаемые через Ajax), без необходимости их сначала визуализировать, подобно контейнеру ресурсов или листу спрайтов.
проверьте это, если вам интересно: http://snapsvg.io
Поскольку он еще не упоминается здесь: Вы также должны взглянуть на Dojox.drawing, который также обеспечивает хорошие возможности рисования SVG. Он обладает довольно внушительным набором функций. Я только начинаю с ним проект, но мне кажется, что он намного превосходит (по крайней мере, с точки зрения возможностей) Raphael и JQuerySVG.
Эта презентация убедила меня использовать ее вместо Raphael/JQuerySVG: http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082
Ссылка: http://dojotoolkit.org/reference-guide/dojox/index.html
Ссылка на Dojocampus: http://docs.dojocampus.org/dojox/drawing
Загрузите Dojo (включая Dojox): http://dojotoolkit.org/download/
Еще одна svg-библиотека javascript, которую вы можете посмотреть, - d3.js. http://d3js.org/
Я предпочитаю использовать RaphaelJS, потому что он обладает большими возможностями для перекрестного браузера. Однако некоторые эффекты SVG и VML не могут быть достигнуты с помощью RaphaelJS (комплексные градиенты...).
Google также разработал собственную библиотеку, чтобы включить поддержку SVG в IE: http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip
Если вам не нужна поддержка VML и IE8, используйте Canvas (например, PaperJS). Посмотрите последние демо-версии IE10 для Windows 7. У них потрясающая анимация в Canvas. SVG не способен ничего приблизить к ним. Общий холст доступен во всех мобильных браузерах. SVG не работает в ранних версиях Android 2.0-2.3 (как я знаю)
Да, Canvas не масштабируется, но он настолько быстрый, что вы можете перерисовать весь холст быстрее, чем браузер, способный прокручивать порт представления.
С моей точки зрения, оптимизация Microsoft предоставляет средства для использования Canvas в качестве обычного движка GDI и реализации графических приложений, например, мы делаем их для Windows.