shimapa23 Feb 7 2013 at 21:39

Интерактивная инфографика с анимациями CSS и SVG

7 min

46K

Website development*CSS*HTML*

Tutorial

Translation

+45

Comments 18

Abcd_Efgh Feb 7 2013 at 21:45

ПОЖАЛУЙСТА, УБЕРИТЕ КАПС ИЗ ЗАГОЛОВКОВ
(простите, не прочитал примечания в конце)

-8

NeoNN Feb 7 2013 at 23:58

А еще svg это популярный формат во многих системах digital-signage. В связке с JS очень мощный инструмент в руках профессионала.

Zoberg Feb 8 2013 at 02:00

Есть библиотеки, которые немного упрощают (вопрос привычки) работу с svg для javascript. Например, http://d3js.org/.

Ganesh Feb 8 2013 at 13:39

Вряд ли стоит использовать d3js для того что бы упростить работу с svg. Есть куча более специализированных библиотек для работы с графикой.

milast Feb 8 2013 at 02:06

У меня Опера 12.14 под Ubuntu, к сожалению нет анимации в шкале. Сперва не понял в чём идея, пока не открыл в хромиуме.

FantasyOR Feb 8 2013 at 09:22

Opera 12.14 под Windows 7 — тоже нет анимации.
А ещё в Opera под Android не работает кнопки «Предпросмотр» и «Написать» на хабре.

UFO just landed and posted this here

Sakura Feb 8 2013 at 02:59

Safari 6 все ок

Anton_from_Amber Feb 8 2013 at 10:12

«нигде, кроме Хрома» — неправда. Фаерфокс 18 под Убунту нормально и шустро всё показывает.

omfg Feb 8 2013 at 07:44

torbasow Feb 8 2013 at 09:08

Но самое клевое свойство SVG, о котором многие разработчики не знают, это то, что этот формат построен на спецификации XML.

Что, правда? Многие не знают? О.

Мы загружаем SVG файл с помощью JavaScript, чтобы получить доступ к HTML содержимому файла.

Ничего не понял.

-1

UFO just landed and posted this here

shimapa23 Feb 8 2013 at 10:38

Долго думал над этим предложением, и не знал как лучше всего его преподнести… Предложите свой вариант!

NickyX3 Feb 8 2013 at 13:10

Мы загружаем SVG файл с помощью JavaScript, чтобы получить доступ к его элементам с помощью DOM.

Как то так.
Следует заметить, что популрный jquery без плагинов работать со свойствами и параметрами svg не умеет. Use Jquery.svg.dom, Luke!

NickyX3 Feb 8 2013 at 13:12

Если будет время — напишем статью как мы работаем с блоками на svg поверх google карты в нашем бета-проекте и почему мы перешли на svg с canvas

UFO just landed and posted this here

ilusha_sergeevich Feb 8 2013 at 15:33

Замечательная идея для создания инфографики. Инфографика в так формате может еще и прибыль на рекламе давать

rassadin Feb 11 2013 at 01:15

Вот отличный пример как не надо делать web графику, в том числе и инфографику.

Основная критика — не обеспечен принцип graceful degradation для недостаточно старых, но популярных браузеров.
Реализация «нет SVG — не печенек», подходит разве что для демок, для продакшена не подходит.

Ну и принцип «не плодить лишних сущностей без необходимости» автору видимо не знаком. Думаю вполне очевидно, что в этом примере можно вполне было бы обойтитсь только HTML и CSS стилями без использования SVG, JS и тем более jQuery.
Все таки это же не Duck Hunt на чистом СSS писать.

Если же это все-таки пример ради примера, чтобы показать связку CSS-SVG, то как минимум это надо озвучить, и предложить варианты попрактичнее.

Show the best of all time