Я работаю над интерактивным интерфейсом, используя SVG и JavaScript / jQuery, и пытаюсь сделать выбор между Raphael и jQuery SVG . Я хотел бы знать
Мне не нужна поддержка VML / IE в Raphael или возможности построения графиков в jQuery SVG. Меня прежде всего интересует самый элегантный способ создания, анимации и управления отдельными элементами на холсте SVG.
Ответы:
Я недавно использовал Raphael и jQuery SVG - и вот мои мысли:
Плюсы: хорошая стартовая библиотека, легко сделать много вещей с SVG быстро. Хорошо написано и задокументировано. Много примеров и демонстраций. Очень расширяемая архитектура. Отлично с анимацией.
Минусы: является слоем поверх фактической разметки SVG, затрудняет выполнение более сложных вещей с SVG, таких как группировка (она поддерживает наборы, но не группы). Не делает большой с редактированием уже существующих элементов.
Плюсы: плагин jquery, если вы уже используете jQuery. Хорошо написано и задокументировано. Много примеров и демонстраций. Поддерживает большинство элементов SVG, обеспечивает простой доступ к элементам
Минусы: архитектура не такая расширяемая как Рафаэль. Некоторые вещи могут быть лучше задокументированы (например, настройка элемента SVG). Не делает большой с редактированием уже существующих элементов. Полагается на семантику SVG для анимации - что не так уж и здорово.
SnapSVG является преемником Рафаэля. Он поддерживается только в браузерах с поддержкой SVG и поддерживает практически все функции SVG.
Если вы делаете что-то быстро и легко, Рафаэль - легкий выбор. Если вы собираетесь делать что-то более сложное, я решил использовать jQuery SVG, потому что я могу значительно проще управлять фактической разметкой, чем с помощью Raphael. И если вам нужно решение не из jQuery, тогда SnapSVG - хороший вариант.
Что касается потомков, я хотел бы отметить, что в итоге я выбрал Raphael из-за чистого API и «бесплатной» поддержки IE, а также потому, что активная разработка выглядит многообещающе (поддержка событий была добавлена, например, в версии 0.7). Тем не менее, я оставлю вопрос без ответа, и мне все еще было бы интересно узнать об опыте других, используя библиотеки Javascript + SVG.
Я большой поклонник Raphael, и импульс развития, кажется, набирает силу (версия 0.85 была выпущена в конце прошлой недели). Другим большим плюсом является то, что его разработчик, Дмитрий Барановский , в настоящее время работает над плагином для построения диаграмм Raphael, g.raphael , который выглядит довольно привлекательно (есть несколько примеров выходных данных ранних версий на Flickr ) ,
Тем не менее, просто для того, чтобы добавить еще одного возможного претендента в набор библиотек SVG, Google SVG Web выглядит действительно многообещающе (хотя я не большой поклонник Flash, который он использует для рендеринга в браузерах, не совместимых с SVG). Вероятно, один, чтобы посмотреть, особенно с предстоящей конференции SVG Open .
Рафаэля определенно проще настроить и начать, но учтите, что есть способы выразить вещи в SVG, которые не возможны в Рафаэле. Как отмечено выше, нет никаких «групп». Это подразумевает, что вы не можете реализовать слои преобразования координат. Вместо этого доступно только одно преобразование координат.
Если ваш дизайн зависит от вложенных преобразований координат, Рафаэль не для вас.
О, Рафаэль значительно продвинулся с июня. Есть новая библиотека графиков, которая может работать с ней, и они очень привлекательны. Рафаэль также поддерживает полный синтаксис пути SVG и включает в себя действительно продвинутые методы пути. Зайдите на мой сайт 1.2.8+ (бесстыдный плагин) и оттуда подпрыгните на сайт Дмитрия. http://www.irunmywebsite.com/raphael/raphaelsource.html
Я думаю, что это не совсем не связано, но вы рассматривали холст? что-то вроде Process JS может сделать это проще.
Вы также должны взглянуть на svgweb. Он использует Flash для рендеринга SVG в IE и, опционально, в других браузерах (в тех случаях, когда он поддерживает больше, чем сам браузер).
Я отдаю свой голос за Рафаэля - кросс-браузерная поддержка, чистый API и постоянные обновления (пока что) делают его приятным в использовании. С jQuery тоже очень хорошо играет. Обработка классная, но более полезная в качестве демонстрации для самых передовых вещей на данный момент.
Как новичок в Javascript, я обнаружил, что образцы Rapahel не так просты, я рекомендую http://cancerbero.mbarreneche.com/raphaeltut , который является настоящим пошаговым руководством.
Для тех, кому плевать на IE6 / IE7, тот же самый человек, который написал Raphael, создал движок svg специально для современных браузеров: Snap.svg .. у них действительно хороший сайт с хорошими документами: http://snapsvg.io
Snap.svg не может быть проще в использовании и может манипулировать / обновлять существующие SVG или генерировать новые. Вы можете прочитать этот материал на странице snap.io о странице, но здесь есть краткий обзор:
Cons
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 не способен делать что-либо близкое к ним. Общий Canvas доступен во всех мобильных браузерах. SVG не работает на ранних версиях Android 2.0-2.3 (насколько я знаю)
Да, Canvas не масштабируется, но он настолько быстр, что вы можете перерисовать весь холст быстрее, чем браузер, способный прокручивать порт просмотра.
С моей точки зрения, оптимизация Microsoft предоставляет средства для использования Canvas в качестве обычного движка GDI и реализации графических приложений, как мы делаем это сейчас для Windows.