Comments 15
SVG рулит, примерно в 2010 году попробовал делать мультимедийные штуки на нем, после чего несколько комерческих проектов с использованием SVG вышло, работало мега шустро на любых Atom-ах и FullHD экранах того периода.
Пример использование SVG для анимации пути прохода
Был отдельный редактор, в котором задавались POI и связи между ними, дальше алгоритм уже сам строил пути прохода в зависимости от заданных в коде точек «откуда» и «куда» и подсвечивал этажи:
Да, SVG штука мощная и удобная, ведь с ней можно работать как с помощью JavaScript, так и с помощью CSS. Вообще чем больше я работаю с векторной графикой, тем больше мне она нравится.
Самое главное что Chrome умеет (умел?) использовать GPU для SVG, поэтому анимация почти любой сложности с огромным числом элементов (c 0:30) рисуется и двигается плавно.
На видео элементов кот наплакал. SVG тормозит уже на паре тысяч точек (если это график)
1699 мест в отрисованном зале, учитывая дополнительные элементы, номера и прочее думаю около 3000-4000 элементов наберется (а уж сколько точек — незнаю).
Пардон, под точками я имел в виду элемент path. Ну в общем либо я не умею его готовить, либо еще что, но аналог вот такой штуки bl.ocks.org/mbostock/4063423 (это иерархический кластеринг) при около 10 тысячах элементов заставляла меня очень печалится…
Помойму раньше в хроме был флаг, включающий GPU аксселерацию отрисовки SVG (сейчас увидел только про SVG фильтры, но может это оно и есть). К сожалению не осталось у меня исходников, чтобы посмотреть что и как было тогда сделано, может быть какие то хаки и пришлось лепить, чтобы скорость сохранить. Но точно помню что был в диком восторге от SVG, работой с объектами и анимацией. Лепилось это в нескольких проектах подряд и производительность была самая последняя проблема.
Как вы правильно заметили — подготовка (и оптимизация) SVG имеют огромное влияние на производительность. Десять тысяч элементов вроде цифра не маленькая, но поскольку о сложности этих элементов ничего неизвестно — это не показатель. Но то, что с отрисовкой карты мира масштаба 1:50,000,000 (1см = 500км) особых проблем нет (а это порядка 69 тысяч точек), вселяет надежду. Вам я советую изучить вопрос оптимизации SVG, возможно удастся упростить часть элементов, уменьшить точность, это должно помочь.
По поводу сложности — допустим сектор круга (d3'шный arc). Вопрос не про единовременную отрисовку, к ней вопросов нет, вопрос был про анимацию. Я не знаю с каким фпс-ом работает transition в d3, но вот requestAnimationFrame это по дефолту 60 фпс. В анимации, допустим, меняются радиусы у этих элементов. Профайлер у меня вообще на изменение атрибута у DOM-элемента ругался больше всего. Снижение фпс, замена честных секторов на полигоны и тому подобное да, помогает. Просто мне не понравился тезис
Ну и не надо забывать что есть например IE, в котором SVG работает не в пример хуже чем в хроме. Если я где-то не прав, поправьте пожалуйста, скорее всего я и впрямь чего-то не знаю.
поэтому анимация почти любой сложности с огромным числом элементов (c 0:30) рисуется и двигается плавно.
Ну и не надо забывать что есть например IE, в котором SVG работает не в пример хуже чем в хроме. Если я где-то не прав, поправьте пожалуйста, скорее всего я и впрямь чего-то не знаю.
Ещё статья на тему — 24 ways: Animating Vectors with SVG
Sign up to leave a comment.
Анимация SVG-элемента path